[英]Align Img Vertically within Div HTML and CSS
我发现以下在div
垂直对齐img
解决方案
https://stackoverflow.com/a/7310398/626442
这对于一个基本示例非常有用。 不过,我已经不得不延长这一点,我希望有一个row
有两个bootstrap
col-md-6
在其列。 在第一列中,我想要一个256像素的图像,在第二列中,我想要一个h1
, p
和一个按钮。 我必须遵循HTML:
<div class="home-costing container">
<div class="row">
<div class="frame">
<span class="helper"></span>
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
</div>
<div class="col-md-6">
<h2>Header</h2>
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<a class="btn btn-default"
href='@Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
和以下CSS:
.home-costing {
color: #fff;
text-align: center;
padding: 50px 0;
border-bottom: 1px solid #ff6500;
}
.home-costing h2 {
text-transform: uppercase;
font-size: 60px;
}
.home-costing p {
font-size: 18px;
}
.home-costing .frame {
height: 256px;
width: 256px;
border: 0;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.home-costing .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.home-costing img {
vertical-align: middle;
max-height: 256px;
max-width: 256px;
}
问题在于,现在不再包含第二列,并且文本也不会自动换行并移到右侧。
如何将第一列中的图像与右列中的文本居中对齐,而第二列中仍能得到正确的换行?
您的HTML需要更新,在Bootstrap中,div顺序应始终为.container> .row> .col- *-*,但是您的代码为.container> .row> .frame> .col- *-*。 我已经更正了您的HTML,现在您的代码可以了。
HTML:
<div class="home-costing container">
<div class="row">
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
</div>
<div class="col-md-6">
<h2>UserCost</h2>
<p>Hello, I'm a paragraph</p>
<a class="btn btn-default"
href='@Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
链接到完成的代码示例: Codepen-更新和工作代码
这也解决了p标签上的自动换行问题。
CSS:
p {
font-size: 18px;
word-wrap: break-word;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.