在文字html和CSS旁邊對齊圖片
[英]Align image next to text html & css
問題描述
目前，我的CSS和HTML中包含以下內容：
但是，我希望圖像與標題文本對齊，如下所示：
我該怎么辦？ 我已將文本浮動到左側，將圖像浮動到右側。
這是我的CSS和HTML
html, body { margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; } .wrapper { width: 1100px; max-width: 90%; margin: 0 auto; } #top_header { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1; background-color: #26ABF5; height: 70px; width: 100%; vertical-align: middle; } #logo_top { display: inline-block; float: left; width: 53px; padding-top: 8px; } #main_nav { display: inline-block; font-size: 13px; line-height: 70px; padding-left: 150px; } #main_nav a { color: #fff; font-weight: 400; text-decoration: none; margin-left: 6em; } .button { float: right; justify-content: center; display: flex; width: 101px; margin-top: 16px; padding-top: 9px; padding-bottom: 9px; border-radius: 2px; background-color: #fff; text-decoration: none; font-family: 'Open Sans', sans-serif; color: #26abf5; font-size: 13px; font-weight: 600; } .banner { height: 400px; background-image: url('../images/Banner_bg.jpg'); background-size: cover; background-repeat: no-repeat; } .banner_header { margin-top: 60px; display: flex; padding-top: 89px; justify-content: center; font-family: 'Open Sans', sans-serif; color: #fff; font-weight: 700; font-size: 33px; } .banner_paragraph { display: flex; justify-content: center; font-family: 'Open Sans', sans-serif; color: #fff; font-size: 14px; font-weight: 400; letter-spacing: 0.5px; margin-top: -15px; } .priser_button { display: flex; width: 207px; justify-content: center; border: 3px solid #fff; -webkit-transition: background-color 400ms ease; transition: background-color 400ms ease; font-family: 'Open Sans', sans-serif; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; padding: 9px 0 9px 0; text-decoration: none; } .priser_button:hover { background-color: #26abf5; } .container { display: flex; padding-top: 84px; justify-content: center; } .logo { width: 53px; padding-top: 5px; } .underbanner_header { display: flex; margin-top: 60px; font-family: 'Open Sans', sans-serif; } .content_p { font-family: 'Open Sans', sans-serif; max-width: 400px; float: left; } .image_content { float: right; width: 40%; margin-bottom: 30px; }
<body> <header id="top_header"> <div class="wrapper"> <a href="index.html"><img id="logo_top" draggable="false" src="images/logo1.png"></a> <nav id="main_nav"> <a href="index.html">FORSIDE</a> <a href="#">HVAD TILBYDER VI?</a> <a href="#">PRISER</a> <a href="#">OM OS</a> </nav> <a class="button" href="#">LOG IND</a> </div> </header> <div class="banner"> <h2 class="banner_header">DANMARKS FEDESTE FITNESS CENTER</h2> <p class="banner_paragraph">BLIV EN DEL AF TEAMET I DAG</p> <div class="container"><a class="priser_button" href="#">SE VORES PRISER</a> </div> </div> <div class="underbanner"> <div class="wrapper"> <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3> <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p> <img src="images/content1.jpg" class="image_content"/> </div> </div> </body>
2 個解決方案
解決方案1
1 已采納 2016-10-22 20:40:07
自動換行，將float: left從.content_p float: left移到包裝器（ underbanner_content ），並為圖像提供相同的頂部margin-top: 60px; （ margin-top: 60px; ）
html, body { margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; } .wrapper { width: 1100px; max-width: 90%; margin: 0 auto; } #top_header { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1; background-color: #26ABF5; height: 70px; width: 100%; vertical-align: middle; } #logo_top { display: inline-block; float: left; width: 53px; padding-top: 8px; } #main_nav { display: inline-block; font-size: 13px; line-height: 70px; padding-left: 150px; } #main_nav a { color: #fff; font-weight: 400; text-decoration: none; margin-left: 6em; } .button { float: right; justify-content: center; display: flex; width: 101px; margin-top: 16px; padding-top: 9px; padding-bottom: 9px; border-radius: 2px; background-color: #fff; text-decoration: none; font-family: 'Open Sans', sans-serif; color: #26abf5; font-size: 13px; font-weight: 600; } .banner { height: 400px; background-image: url('../images/Banner_bg.jpg'); background-size: cover; background-repeat: no-repeat; } .banner_header { margin-top: 60px; display: flex; padding-top: 89px; justify-content: center; font-family: 'Open Sans', sans-serif; color: #fff; font-weight: 700; font-size: 33px; } .banner_paragraph { display: flex; justify-content: center; font-family: 'Open Sans', sans-serif; color: #fff; font-size: 14px; font-weight: 400; letter-spacing: 0.5px; margin-top: -15px; } .priser_button { display: flex; width: 207px; justify-content: center; border: 3px solid #fff; -webkit-transition: background-color 400ms ease; transition: background-color 400ms ease; font-family: 'Open Sans', sans-serif; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; padding: 9px 0 9px 0; text-decoration: none; } .priser_button:hover { background-color: #26abf5; } .container { display: flex; padding-top: 84px; justify-content: center; } .logo { width: 53px; padding-top: 5px; } .underbanner_content { float: left; } .underbanner_header { margin-top: 60px; font-family: 'Open Sans', sans-serif; } .content_p { font-family: 'Open Sans', sans-serif; max-width: 400px; } .image_content { float: right; width: 40%; margin-bottom: 30px; margin-top: 60px; }
<body> <div class="underbanner"> <div class="wrapper"> <div class="underbanner_content"> <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3> <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p> </div> <img src="http://placehold.it/150" class="image_content" /> </div> </div> </body>
解決方案2
1 2016-10-22 20:43:13
我建議進行一些更改：
.col_50{
float:left;
width: 50%;
}
.underbanner_header {
margin-top: 0;
font-family: 'Open Sans', sans-serif;
}
.image_content {
float: right;
width: 100%;
margin-bottom: 30px;
}
<div class="underbanner">
<div class="wrapper">
<div class="col_50">
<h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3>
<p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
</div>
<div class="col_50">
<img src="images/content1.jpg" class="image_content"/>
</div>
</div>
</div>
如何使用 HTML 和 CSS 正確右對齊文本以顯示在圖像旁邊
[英]How to properly right-align text to apeear next to an image using HTML and CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.