在文字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.