如何将图像和文本并排对齐?HTML CSS 弹性盒子
P粉350036783
P粉350036783 2023-08-26 00:23:03
0
1
449
<p>现在文本在图像下方对齐。我希望文本在图像旁边垂直对齐。我尝试添加<code>flex-direction: column</code>和<code>justify-content: center</code>,但没有起作用。我还尝试了<code>float</code>,但也没有起作用。我无法弄清楚如何将文本和图像并排对齐。如何使它们并排对齐?我的代码中有错误吗?</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.whoweare { padding: 80px 0px 50px; background-color: #000000; } .whoweare #whoweareimg { width: 100%; min-width: 200px; } .whoweare .content { -webkit-display: flex; display: flex; flex-wrap: wrap; /* flex-direction: column; */ /* justify-content: center; */ } .whoweare .content .box { /* padding:5px; flex:0 0 100%; max-width: 100%; */ padding: 5px; flex: 0 0 100%; max-width: 100%; } .whoweare .content #whoweareimg { width: 50%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); padding: 30px; } .whoweare .content h2 { font-size: 50px; font-weight: 500; margin: 20px; color: #ffffff; padding: 0px 0px 20px; } .whoweare .content p { font-size: 20px; line-height: 50px; color: #ffffff; margin: 20px; padding: 0px 0px 20px; font-family: 'Open Sans', sans-serif; }</pre> <pre class="brush:html;toolbar:false;"><section class="whoweare" id="whoweare"> <div class="container"> <div class="content"> <div class="box text wow slideInRight"> <!-- <div class="class-items"> --> <div class="item wow bounceInUp"> <!-- <div class="item-img"> --> <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" /> </div> <div class="box text wow slideInRight"> <h2>我们是谁</h2> <p>UNDRGRND Muscle & Fitness,街头文化与健美和健身生活方式相结合。我们的目标是为我们的会员提供独特的现代化培训体验,在沃恩/大多伦多地区。 </br> </br> 体验一种独特的培训氛围,以帮助您进行无与伦比的锻炼。IFBB职业运动员提供独家培训课程,以帮助会员实现他们的生活方式和/或比赛准备目标。该设施将提供市场上最好的健身设备,包括Atlantis,Cyber,Arsenal等。 </br> </br> 在UNDRNRGD,我们都是一个大家庭,共同努力。 <p><br /></p></pre>
P粉350036783
P粉350036783

全部回复(1)
P粉420868294

您的HTML代码似乎有问题,因为其中一个

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!