问题：
引导文本和图像在中间对齐[重复]
万浩淼
在bootstrap中有没有一种方法可以：
所以我希望文本和图像在页面的中心。右边是文本，右边对齐，左边是图像，我试过用divs，然后用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>
共有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>
类似资料：
-
Twitters Bootstrap框架中是否有一组对齐文本的类？ 例如，我有一些带有$totals的表格，我希望它们与右边对齐。。。 和
-
我试图创建一个网页的主横幅旁边的图像标题。我尝试做的一个示例可以在下面找到：https://optimaninja.com/ 我正在使用bootstrap,下面是一些我必须开始的简单初学者代码： 引导代码： 谢谢你的帮助。
-
我正在以列表格式显示文本和图像，但我不能让它们完美地排列在中间，在一条直线上，我错过了什么 下面是我的布局代码
-
我想重新创建这样的东西： 然后我会把它用于社交媒体和外部网站：）这是我能想到的： 正如您所看到的，这里有两个问题： null 我以为&这两行可以将文本居中，但事实并非如此。
-
我想在网站上集成一个时间线，并使用以下代码作为时间线的基础：http://bootsnipp.com/snippets/featured/timeline-responsive 我通过添加图片进一步扩展了代码片段。一开始，两张图片（第一排）一切都很好，三张也很好（在前两张下面），但一出现第四张，后者突然出现在下面一排，而不是第二排下面的第三排。 HTML： 如果你需要进一步的代码部分，请告诉我，我
-
我目前使用的是bootstrap 4。我试图将文本对齐到我的卡头上，我尝试使用，但它不起作用。解决办法是什么？ 这是我的卡头代码：