gpt4 book ai didi

html - 响应式地在两行文本旁边居中图像

转载 作者:太空宇宙 更新时间:2023-11-04 10:39:44 26 4
gpt4 key购买 nike

我试图在居中的两行文本旁边显示图像。我附上了一个示例,您会从中看到图像位于文本的左侧,而我试图将图像居中放置在文本的左侧,并使图像/文本完美居中。

CSS:

.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}

HTML:

<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>

SEE DEMO

最佳答案

简单地将文本包裹在一个div中并显示它 inline-block:

.center-class {
text-align: center;
}

.righty > * {
display: inline-block;
vertical-align: middle;
}

.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>

Updated Codepen

关于html - 响应式地在两行文本旁边居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35899786/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com