Bootstrap 3使图像中心和内容垂直中心
问题描述:
我努力尝试调整我的响应式图像中心。如果我不使用<img-responsive>
标签,它们会对齐中心。Bootstrap 3使图像中心和内容垂直中心
图像是灰色的占位符正方形,我希望它们位于文本上方的中心,然后将文本与图像垂直对齐。
我正在使用引导程序3
这是我的代码。
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title>Layout3</title>
<style>
.panel1 {
background-color: pink;
height:768px;
align-items: center;
}
.panel2a {
background-color:white;
text-align: center;
align-content: center;
height:384px;
margin:0 auto;
}
.panel2b {
background-color:#3DB39E;
text-align: center;
align-content: center;
height:384px;
margin:0 auto;
}
.panel3 {
background-color:#efc75e;
height:768px;
}
.panel4 {
background-color:#e2574c;
height:768px;
}
.panel5 {
background-color:#3db39e;
height:768px;
}
.panel6 {
background-color:#e2574c;
height:768px;
}
.footer {
background-color:#000000;
</style>
</head>
<body>
<div class="container-full">
<div class="col-lg-12 panel1">
<div class="col-lg-6">
<img class="img-responsive" src="http://placehold.it/456x366" alt="" />
</div>
<div class=" col-lg-6">
<h1>Title</h1>
<p class="lead">description</p>
<p><input type="text" class="form-control" placeholder="e-mail"><a class="btn btn-large btn-success" href="#" target="ext">NOTIFY ME</a></p>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-12 col-md-4 panel2a">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>1</h1>
<p>abc</p>
</div>
<div class="col-xs-12 col-md-4 panel2a">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>2</h1>
<p>def</p>
</div>
<!-- 2b -->
<div class="col-xs-12 col-md-4 panel2a">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>3</h1>
<p>ghi</p>
</div>
<div class="col-xs-12 col-md-4 panel2b">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>4</h1>
<p>jkl</p>
</div>
<div class="col-xs-12 col-md-4 panel2b">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>5</h1>
<p>mno</p>
</div>
<div class="col-xs-12 col-md-4 panel2b">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>6</h1>
<p>pqr</p>
</div>
</div>
>
</div> <!-- /container full -->
</body>
</html>
答
可以摆脱大部分的内联CSS和应用此一般概念到每个图像的容器:
<div class="outer" >
<div class="inner">
<img class="img-responsive center-block" src="//placehold.it/200x100" />
<span class="text-center">Description</span>
</div>
</div>
CSS
.outer {
display: table;
width: 100%;
}
.inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
这里是一个[** bootply **](http://www.bootply.com/Hf6lUH2WfN)如果有人想要解决这个问题,我会提出 – 2014-09-05 20:30:35
http://*.com/questions/25645881/bootstrap-3-2-vertical-align-image-next-to-text-without-knowing-height/25651881#25651881。首先,由于高度只是内容的高度,而不是父级(行)的高度,所以需要将col- *的高度设置为相等的高度,以便将水平居中的块元素(这是img响应的)图像上的类“中心块”或在图像响应类上写入一些“边距:0自动”(它将是全局的) – Christina 2014-09-05 20:50:47