Bootstrap文本和图像如何在中间对齐

Question

Bootstrap文本和图像如何在中间对齐

4

在Bootstrap中有没有一种方法可以实现以下效果：

所以我希望文字和图片位于页面中央。文字右对齐，图片左对齐。我尝试使用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>

编辑文本应该在图像中间对齐，两者都应该在中心位置。

- DataScientYst

@ZimSystem 你为什么认为那是重复的？ - DataScientYst

3个回答

1

你尝试过使用Bootstrap的网格系统吗？像这样的东西可能是你的解决方案：

<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>

- rakwaht

1

尝试这个。

<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>

- Stavros Angelis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- neophyte · Accepted Answer

试试这个--

使用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>