Question

                                        Text                            Image

我想在引导程序中对齐中间的文本和右侧的图像，但我无法这样做

这是我的HTML代码

<div class="english-Box">
        <h1 class="text-center color-English">English</h1>
    <img class="eng-Img" src="images/abc.png"></img>
        </div>

这是css代码

.eng-Img{
   float:left;
  }
.color-English{
    padding-top: 14px;
    color: #7952b3;
    font-family: 'PT Sans', sans-serif;
    font-size: 25px !important;
    letter-spacing: 2px;
  }

  .english-Box{
    border-radius: 5px;
    Border:1px solid #7952b3;
    height: 60px;
    width:20%;
    display: block;
    margin:0 auto 80px auto !important;
    float: none;

  }

Answer 1

为您的图片提供pull-right类，如：

<img class="eng-Img pull-right" src="images/abc.png"/>

请注意，img标记是一个自动结束标记，应以>结尾，不需要</img>。

您可以使用引导程序 Grid-System 来安排div：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="english-Box row">
  <div class="col-xs-10">
    <h1 class="color-English text-center">English</h1>
  </div>
  <div class="col-xs-2">
    <img class="eng-Img pull-right" src="images/abc.png" />
  </div>
</div>

＆＃13;

Answer 2

因为你正在使用bootstrap，所以只使用bootstrap float类。像这样的东西可以解决问题。将'float-left'类添加到'h1'，将'float-right'添加到'img'。

<div class="english-Box">
    <h1 class="text-center color-English float-left">English</h1>
    <img class="eng-Img float right" src="images/abc.png"></img>
</div>

在css中，给'h1'一个宽度。这将有助于h1的文本在该宽度内居中。

.color-English {
  width: 70%;
}

Answer 3

使用以下html更改您的代码：

<div class="container">
<div class="english-Box">
    <h1 class="text-center color-English">English</h1>    
</div>
    <img class="eng-Img" src="images/abc.png" />
</div>

和CSS：

.container{
  position : relative;
  width : 100%;
}
.eng-Img{

   float:right;
  }
.color-English{
    padding-top: 14px;
    color: #7952b3;
    font-family: 'PT Sans', sans-serif;
    font-size: 25px !important;
    letter-spacing: 2px;    
  }

  .english-Box{
    position:absolute;
    border-radius: 5px;
    Border:1px solid #7952b3;
    height: 60px;
    width:20%;
    display: block;
    margin:0 auto 80px auto !important;
    left:50%;

  }

将整个内容包装在容器类中，然后使用positioning作为内容包装器relative，其内容为absolute。

希望它有所帮助。

Answer 4

为引导程序4提供图像类<p>。<html> ... ... <div id="1> <p> Hey</p></div> <div id="2> <p> Hey there!</p></div> <div id="3> <p> How are you<p> <div id="4"> <p> Hey</p> <p> How are you</p> </div> </div> .... ... </html>用于引导程序3.

float-right

如何使用bootstrap 4将文本中心和图像对齐在一个div中

4 个答案: