[英]Align Img Vertically within Div HTML and CSS
I have found the following solution for aligning an img
vertically within a div
我发现以下在div
垂直对齐img
解决方案
https://stackoverflow.com/a/7310398/626442 https://stackoverflow.com/a/7310398/626442
and this works great for a basic example. 这对于一个基本示例非常有用。 However, I have had to extend this and I want a row
with two bootstrap
col-md-6
columns in it. 不过,我已经不得不延长这一点,我希望有一个row
有两个bootstrap
col-md-6
在其列。 In the first column I want a 256px image, in the second I want a h1
, p
and a button. 在第一列中,我想要一个256像素的图像,在第二列中,我想要一个h1
, p
和一个按钮。 I have to following HTML: 我必须遵循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>
and the following CSS: 和以下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;
}
The problem is that now the second column is no longer contained and the text does not wrap and goes off to the right. 问题在于,现在不再包含第二列,并且文本也不会自动换行并移到右侧。
How can I center align my image in the first column with the text in the right column and still get the correct wrapping in the second column? 如何将第一列中的图像与右列中的文本居中对齐,而第二列中仍能得到正确的换行?
Fiddler: https://jsfiddle.net/Camuvingian/1sc40rm2/2/ 提琴手: https : //jsfiddle.net/Camuvingian/1sc40rm2/2/
Your HTML needed updated, in Bootstrap, the div order should ALWAYS go .container > .row > .col- * - *, your code however went .container > .row > .frame > .col- * - *. 您的HTML需要更新,在Bootstrap中,div顺序应始终为.container> .row> .col- *-*,但是您的代码为.container> .row> .frame> .col- *-*。 I have corrected your HTML and now your code works. 我已经更正了您的HTML,现在您的代码可以了。
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>
Link to finished code example: Codepen - Updated & working code 链接到完成的代码示例: Codepen-更新和工作代码
This fixes the word wrap issue also on the p tag. 这也解决了p标签上的自动换行问题。
CSS: CSS:
p {
font-size: 18px;
word-wrap: break-word;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.