如何使用文本对齐中心和图像就在一个DIV引导4

  • Z时代
  • 2024-01-10
  • 分类：问答

         Text       Image

我想对齐在引导右边的中心和图像的文本，但我不能这样做如何使用文本对齐中心和图像就在一个DIV引导4

这是我的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; 
    }

回答：

给你的图像pull-right类，如：

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

注意，img标签是一个自闭的标签应与>无需</img>结束。

您可以使用引导Grid-System给你安排div的一样：由于您使用的自举只使用引导浮动类

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

回答：

。像这样的事情会做的伎俩。将'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%; 
}

回答：

与更改代码下面的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。

希望它有帮助。

回答：

给你的图像类float-right用于引导4. pull-right是引导3

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

以上是 如何使用文本对齐中心和图像就在一个DIV引导4 的全部内容， 来源链接： utcz.com/qa/265986.html

回到顶部