简单来说,我想要一个标题,其中两个元素浮动到每一侧并垂直居中:
我开始使用非浮动元素执行此操作并设法生成this example。
但是一旦我添加float:left
或float:right
,垂直居中就会丢失(我理解为什么,因为它不再是流程的一部分了)
我想知道实现这一目标的最佳方法是什么。很高兴接受完整的CSS重新设计。
提前致谢!
答案 0 :(得分:1)
将text-align:right
添加到父div,它使子元素对齐右侧。现在将float:left添加到#text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
答案 1 :(得分:1)
垂直居中可能很痛苦,尤其是在您不处理内联元素时。在这种情况下,我建议您利用display:table-cell
。
<强> HTML 强>
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
<强> CSS 强>
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
答案 2 :(得分:0)
以下是一个示例jsfiddle和相同的代码。设置元素的高度时,可以将相同的行高设置为嵌套元素,它们将扩展到高度。垂直居中的内容。
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
答案 3 :(得分:0)
您应该在要居中的元素周围添加一个包装器,并将它们浮动到包装器中。这样的事情:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
当然,这是一个非常简单的例子。您可以根据需要更改值和CSS。