如何使用文本對齊中心和圖像就在一個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

回答

相關問題