HTML + CSS定心用竖排文字图片旁边的

大家好和TKS在您的帮助......我寻找最好的做法来解决一个简单的问题：HTML + CSS定心用竖排文字图片旁边的

.left { 
 
    float: left; 
 
    width: 79%; 
 
    margin-right: 1%; 
 
} 
 
.left img { 
 
    float: right; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 20%; 
 
}

<div class="main"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="right">A TEXT</div> 
 
</div>

我应该如何将文字垂直放置在图像的中间（显然，由于图像的宽度/高度是动态的，因此不在边距或底部使用px）。谢谢！

来源

2016-10-01 Fryla- Cristian Marucci

我会尝试这样的事情[FIDDLE]（https://jsfiddle.net/Lf2fk8cc/2/ ） – Abhi

[垂直对齐图像旁边的文本？]（http://stackoverflow.com/questions/489340/v在文本的下一个图像上） – Rob

而不是“居中垂直文本”我认为你的意思是“垂直居中文本”。否则，它听起来像是垂直的*文本*，而不是它被居中的轴。 –

您可以使用flexbox。见例如：

.main{ 
    display: flex; 
    align-items: center; 
}

https://jsfiddle.net/zb2ozq1k/1/

来源

2016-10-01 14:37:30 marcelo2605

你的小提琴缺少CSS。不知道这是否是故意的。 –

@ J-Bar我更新了。谢谢。 – marcelo2605

很好的答案。但它不会与ie9我认为 –

我摆脱float和使用table-cell！而非。然后，使用vertical-align:middle作为文本。

像这样：

.main{ 
 
    display: inline-table; 
 
    border: 1px solid blue; 
 
} 
 

 
.left { 
 
    width: 79%; 
 
    margin-right: 1%; 
 
    display: table-cell; 
 
    border: 1px solid green; 
 
} 
 

 
.right { 
 
    width: 20%; 
 
    border: 1px solid red; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="right">A TEXT</div> 
 
</div>

来源

2016-10-01 14:45:04 ochi

h1 { 
    display: inline; 
    vertical-align:top; 
}

<div class="middle"> 
    <img src="http://placekitten.com/200/150" > 
    <h1>A TEXT</h1> 
</div>

来源

2016-10-01 17:50:44

HTML + CSS定心用竖排文字图片旁边的

回答

相关问题