在適合調整大小的兩幅圖像之間的html擬合文本

基本上我希望文本始終居中居中。一邊調整大小，一邊調整頁面大小，以佔用所有空白區域。這是我迄今爲止所擁有的。在適合調整大小的兩幅圖像之間的html擬合文本

<div style="text-align:center;"> 
     <img style="float: left; width: 33%; margin:20px 0 0 0;" src="img/pulse.gif"/> 
     <img style="float: right; width: 33%; margin:20px 0 0 0;" src="img/pulseR.gif"/> 

     <h1 style="display:inline; vertical-align: middle; text-align: center; width: 33%;">Safety</h1> 
    </div>

我想刪除寬度：33％，並調整圖像以適應空間大小。請記住它需要被迫停留在一條線上。

感謝

來源

2015-09-06 Korb

看來你正在尋找一個CSS表格。雖然彈性框或列也可能工作，但我的錢在桌子上。 –

你做錯了。將圖像包裝在容器內並使其變得靈活。將文本放在圖像容器之間。 – kappaallday

您可以使用table和table-cell爲display，或者只是傳統的HTML table。

有例如使用displaytable和table-cell（有添加了額外的divs圖片和標題）：

.container 
 
{ 
 
    width:100%; 
 
    display:table; 
 
    margin-top:20px; 
 
} 
 
.container div 
 
{ 
 
    display:table-cell; 
 
    text-align:center; 
 
    vertical-align:top; 
 
} 
 
.container img 
 
{ 
 
    width:100%; 
 
    height:100%; 
 
}

<div class="container"> 
 
    <div><img src="http://placehold.it/350x350"/></div> 
 
    <div><h1>Safety</h1></div> 
 
    <div><img src="http://placehold.it/350x350"/></div> 
 
</div>

來源

2015-09-06 16:07:29 nelek

你可以用DIV容器內的圖像是這樣的：

<div style="text-align:center;"> 
    <div class="left"> <img src="img/pulse.gif"/></div> 
     <h1>Safety</h1> 
<div class="right"> 
    <img src="src="img/pulseR.gif"/></div>

https://jsfiddle.net/uv85304v/

來源

2015-09-06 15:43:19 visarts

在適合調整大小的兩幅圖像之間的html擬合文本

回答

相關問題