我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.
这是我的div风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>做这个的最好方式是什么？
为什么不行vertical-align: middle？然而,vertical-align: top 确实有效.
span{
vertical-align: middle;
}如何在包含内部对齐图像div？
在我的例子,我需要垂直居中的<img>在<div>用class ="frame":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame高度固定,图像高度未知..frame如果这是唯一的解决方案,我可以添加新元素.我试图在IE≥7,Webkit,Gecko上做到这一点.
在这里查看jsfiddle
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img …我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
<body>
<div>Div to be aligned vertically</div>
</body>
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中？
我试图找到最有效的方法来将文本与div对齐.我尝试了一些东西,似乎都没有用.
.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse …说我有以下CSS和HTML代码:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>标题部分是固定高度,但标题内容可能会更改.我想将标题的内容垂直对齐到标题部分的底部,因此最后一行文本"粘贴"到标题部分的底部.
因此,如果只有一行文字,那就像:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
如果有三行:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
怎么能在CSS中完成？
我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.
其中一个图像需要absolute放在div中.
在所有常见浏览器上工作所需的CSS是什么？
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
下面的代码(也可以作为JS Fiddle的演示版)不会将文本放在中间,正如我理想的那样.div即使使用margin-top属性,我也找不到任何方法将文本垂直居中.我怎样才能做到这一点？
<div id="column-content">
<img src="http://i.stack.imgur.com/12qzO.png">
<strong>1234</strong>
yet another text content that should be centered vertically
</div>
#column-content {
display: inline-block;
border: 1px solid red;
position:relative;
}
#column-content strong {
color: #592102;
font-size: 18px;
}
img {
margin-top:-7px;
vertical-align: middle;
}
<div>在页面上垂直和水平居中元素的最佳方法是什么？
我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么？
我正在寻找一种垂直居中对齐containerdiv的方法,jumbotron并将其设置在页面中间.
在.jumbotron必须适应屏幕的整个高度和宽度,所以我用这个CSS.
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
} 的.containerdiv有一个宽度1025px和应在该页面(垂直中心)的中间.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa …html css vertical-alignment twitter-bootstrap twitter-bootstrap-3