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

-1

         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; 

    }

来源

2017-12-27 Tayyab Vohra

给你的图像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>

来源

2017-12-27 15:25:48

它把图像下降，但在右下角不是文字。 –

html中不包含结束标记:)它仅在XHTML –

上与以前相同，因为它是 –

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

来源

2017-12-27 15:39:27 remelkabir

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

希望它有帮助。

来源

2017-12-27 15:46:24

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

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

来源

2017-12-27 15:54:41 Maan56

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

回答

相关问题