如何將徽標與徽標下方的相應文本水平對齊？
[英]How can I align logos horizontally with the respective text underneath the logos?
問題描述
我正在嘗試將徽標與它們下方的相應文本水平對齊，以使它們看起來美觀且井井有條。 目前，它們只是垂直的。 我搜索了該站點和許多其他站點，並嘗試了不同的解決方案，但似乎沒有任何效果。 這是我的代碼。
.intro-text { color: #000000; display: block; width: 100%; margin: 50px 0 0 0; text-align: justify; line-height: 1.8em; } .intro-text-3d { color: #000000; display: block; width: 100%; text-align: center; line-height: 1.8em; } .intro-text-process { color: #000000; display: block; width: 100%; text-align: center; line-height: 1.8em; } .intro-text-toolset { color: #000000; display: block; width: 100%; text-align: center; line-height: 1.8em; } /** Logos **/ .logos-all { display: block; text-align: center; margin: 0 auto; } img { display: inline-block; margin: 0 auto; vertical-align: middle; border: 0; line-height: 50px; max-width: 100%; width: 5%; height: auto; margin-bottom: .95em; } strong { display: block; font-weight: 700; text-align: center; } section h4 { text-align: center; }
<article> <section> <p class="intro-text"> Some text goes here. </p></div> <div> <img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/> <strong>CSS3</strong> </div> <div> <img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/> <strong>Javascript</strong> </div> <div> <img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/> <strong>Wordpress</strong> </div> <div> <img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/> <strong>PhP</strong> </div> </div> </section> <section> <p class="intro-text-3d"> Some text goes here </p> <div class="logos-all"> <div> <img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/> <strong>3DS MAX</strong> </div> <div> <img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/> <strong>Cinema 4D</strong> </div> <div> <img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/> <strong>Blender</strong> </div> </div> </section> <section> <h4>How the process works</h4> <p class="intro-text-process">Some text goes here </p> </section> <section> <h4>Design Toolset</h4> <p class="intro-text-toolset">Some text goes here.</p> <div class="logos-all"> <div> <img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/> <strong>Photoshop</strong> </div> <div> <img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/> <strong>Illustrator</strong> </div> <div> <img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/> <strong>Gimp</strong> </div> <div> <img src="img/inkscape-logo.png" alt="Inkscape"/> <strong>Inkscape</strong> </div> </div> </article> </section>
3 個解決方案
解決方案1
0 2016-08-09 16:08:16
如果您想使用Bootstrap，則可以使用Bootstrap面板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236"> </div> <div class="panel-footer">Title 1</div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236"> </div> <div class="panel-footer">Title 2</div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236"> </div> <div class="panel-footer">Title 3</div> </div> </div> </body> </html>
解決方案2
0 2016-08-09 16:09:47
由於圖像是內聯塊，因此需要將text-align: center放置在父對象上（ <div> ）。
或者：您也可以display: block圖像display: block
或使用flexbox：使您的<div> display: flex; flex-direction: column display: flex; flex-direction: column ，圖片width: auto;
解決方案3
0 2016-08-09 16:12:26
您可以使用浮點數將塊與圖像和文本水平對齊，並使用文本對齊將其中的圖像和文本對齊。
如果您想在其上有背景並且無法正確顯示，則隱藏在該部分內部的溢出會清除其中的浮標。
.intro-text { color: #000000; display: block; width: 100%; margin: 50px 0 0 0; text-align: justify; line-height: 1.8em; } .intro-text-3d { color: #000000; display: block; width: 100%; text-align: center; line-height: 1.8em; } .intro-text-process { color: #000000; display: block; width: 100%; text-align: center; line-height: 1.8em; } .intro-text-toolset { color: #000000; display: block; width: 100%; text-align: center; line-height: 1.8em; } /** Logos **/ .logos-all { display: block; text-align: center; margin: 0 auto; } img { display: inline-block; margin: 0 auto; vertical-align: middle; border: 0; line-height: 50px; max-width: 100%; width: 5%; height: auto; margin-bottom: .95em; } strong { display: block; font-weight: 700; text-align: center; } section h4 { text-align: center; } section { overflow: hidden; } section > div { text-align: center; float: left; width: 25%; /* 1/logos in row */ }
<article> <section> <p class="intro-text"> Some text goes here. </p></div> <div> <img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/> <strong>CSS3</strong> </div> <div> <img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/> <strong>Javascript</strong> </div> <div> <img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/> <strong>Wordpress</strong> </div> <div> <img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/> <strong>PhP</strong> </div> </div> </section> <section> <p class="intro-text-3d"> Some text goes here </p> <div class="logos-all"> <div> <img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/> <strong>3DS MAX</strong> </div> <div> <img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/> <strong>Cinema 4D</strong> </div> <div> <img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/> <strong>Blender</strong> </div> </div> </section> <section> <h4>How the process works</h4> <p class="intro-text-process">Some text goes here </p> </section>
如何在孔寬度上連續對齊 3 個圖像（徽標）並在較小的顯示器上保持對齊方式
[英]How can I align 3 Images (Logos) in a row over the hole width and keep them aligned that way on smaller displays
我有 5 個徽標，我需要將它們水平對齊放置在元素的中心
[英]I have 5 logos that i need to place them aligned horizontally at the centre of the element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.