引导文本和图像在中间对齐[重复]
Posted
技术标签:
【中文标题】引导文本和图像在中间对齐[重复]【英文标题】：bootstrap text and image aligned in the middle [duplicate] 【发布时间】：2017-07-14 02:11:34 【问题描述】：有没有办法在引导程序中有：
所以我希望文本和图像位于页面的中心。 右边是文本右对齐，左边是图像 我尝试过使用 div，然后使用 table，但没有成功。
我试过了：
<img src="your-image/path-here.jpg" class="img-responsive center-block" />
我的代码：
<div class="container">
<div class="row">
<div class="col-md-12">
<img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/bootstrap.jpg" />
<p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
</div>
编辑文字应该在图像的中间对齐，并且两者都应该在中心。
【问题讨论】：
@ZimSystem 为什么你认为这是重复的？ 【参考方案1】：试试这个--
使用class="img-responsive pull-right " 进行图像对齐，使用class="text-left" 进行文本对齐。
@media only screen and (min-width : 320px)
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px)
#text-left
padding-top: 15%;
/* Small Devices, Tablets */
@media only screen and (min-width : 768px)
#text-left
padding-top: 25%;
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)
#text-left
padding-top: 30%;
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)
#text-left
padding-top: 35%;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive pull-right " style="width:200px;height:200px;" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" />
<p id="text-left" class="text-left">Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
</div>
</body>
</html>【讨论】：
文字不在图片中间 使用一些 css 使它在中间.. 检查更新的 sn-p 整页不工作 使用媒体查询调整页边距 我的想法是结合 float: left 和 text-center【参考方案2】：试试这个
<div class="container">
<div class="row">
<div class="col-md-6 text-right">
<p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
<div class="col-md-6 text-left">
<img style='width:200px;height:200px;' src="img/bootstrap.jpg" />
</div>
</div>
</div>
【讨论】：
【参考方案3】：您是否尝试过使用引导程序的网格系统？这样的事情可能是您的解决方案：
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
<div class="col-md-6">
<img style='width:200px;height:200px; margin-right:10px;' src="img/bootstrap.jpg" />
</div>
</div>
</div>
【讨论】：
以上是关于引导文本和图像在中间对齐[重复]的主要内容，如果未能解决你的问题，请参考以下文章