css垂直居中div与容器内的图像
我想尝试使包含左侧图像的div垂直居中。我尝试了很多东西,但我一直在遇到问题。css垂直居中div与容器内的图像
weekly-middle
是div的容器div,它是left
,它包含我想要居中的图像。
该文本已居中。
.weekly-middle {
text-align: center;
width: 100%;
/* \t height:100%;*/
border: none;
border-collapse: collapse;
margin: 0px;
padding-top: 56px;
padding-bottom: 56px;
content: "";
display: table;
/*clear: both;*/
}
.left {
text-align: left;
padding: 20px;
width: 100px;
float: left;
/* \t padding-top: 56px;
\t padding-bottom: 56px;*/
vertical-align: middle;
height: 300px
}
.right {
margin-left: 100px;
float: left;
padding-top: 56px;
padding-bottom: 56px;
}
<div class="weekly-middle teal">
<div class="left">
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
</div>
<div class="right">
<h1>Some Title</h1>
<p class="title">Problems Solved</p>
</div>
</div>
使用Flexbox的。这是一个非常强大的CSS工具:
.left {
text-align: left;
padding: 20px;
width: 100px;
float: left;
/* padding-top: 56px;
padding-bottom: 56px;*/
vertical-align: middle;
height: 300px;
display:flex;
flex-direction:column;
justify-content:center;
}
好,但如果我删除高度? – mcv
基本上,你不能在没有指定高度的div中垂直对齐项目! –
你可以试试下面的代码
<div class="left">
<div class="display-table">
<div class="display-table-cell">
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
</div>
</div>
,并为CSS可以这样写:
.display-table{
display: table;
width:100%;
}
.display-table-cell{
display:table-cell;
vertical-align: middle;
text-align:left;
height: 100px;// your choose
}
因为我在这里编写代码,请检查任何拼写错误。谢谢 –
我在左边应用了'display:table-cell',它工作正常。 – mcv
添加到您的CSS ,希望它有帮助:
.weekly-middle img {
margin-top:50%;
}
.weekly-middle {
text-align: center;
width: 100%;
/* \t height:100%;*/
border: none;
border-collapse: collapse;
margin: 0px;
padding-top: 56px;
padding-bottom: 56px;
content: "";
display: table;
/*clear: both;*/
}
.weekly-middle img {
margin-top:50%;
}
.left {
text-align: left;
padding: 20px;
width: 100px;
float: left;
/* \t padding-top: 56px;
\t padding-bottom: 56px;*/
vertical-align: middle;
height: 300px
}
.right {
margin-left: 100px;
float: left;
padding-top: 56px;
padding-bottom: 56px;
}
<div class="weekly-middle teal">
<div class="left">
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
</div>
<div class="right">
<h1>Some Title</h1>
<p class="title">Problems Solved</p>
</div>
</div>
我想你应该能够只从内部的div删除“左”和“右”的类,它会工作。
看看你在找什么在下面。
.weekly-middle {
text-align: center;
width: 100%;
/* \t height:100%;*/
border: none;
border-collapse: collapse;
margin: 0px;
padding-top: 56px;
padding-bottom: 56px;
content: "";
display: table;
/*clear: both;*/
}
.left {
text-align: left;
padding: 20px;
width: 100px;
float: left;
/* \t padding-top: 56px;
\t padding-bottom: 56px;*/
vertical-align: middle;
height: 300px
}
.right {
margin-left: 100px;
float: left;
padding-top: 56px;
padding-bottom: 56px;
}
<div class="weekly-middle teal">
<div class="">
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
</div>
<div class="">
<h1>Some Title</h1>
<p class="title">Problems Solved</p>
</div>
</div>
我认为他希望它垂直居中。 –
是的,除了右边的div之外,w是左边的div。 – mcv
代替:'显示:table'使用'显示:内联块;',则'vertial对齐:middle'将工作;) – Troyer
,该被标记的问题作为一个副本是不是远程类似于这个问题... –
@mcv你正在尝试使用'display:table',但为了做到这一点,你还需要有一些元素的包装内'显示:表cell'。你有一张桌子,但没有牢房。你也不应该在左列中明确声明一个高度。最后,不要浮动列。一旦你有'display:table-cell',他们就会相应排队:https://jsfiddle.net/L8txsvLx/ –