堆栈内存溢出
  简体   繁体   English

在文字html和CSS旁边对齐图片

[英]Align image next to text html & css

 原文  2016-10-22 20:15:58  3   2    html/ css/ image/ text/ alignment

问题描述

I currently have this from my CSS & HTML: 目前，我的CSS和HTML中包含以下内容： 在此处输入图片说明

However, I would like the image to align with the header text, like this: 但是，我希望图像与标题文本对齐，如下所示： 在此处输入图片说明

How would i do this? 我该怎么办？ I have floated the text to the left and the image to the right. 我已将文本浮动到左侧，将图像浮动到右侧。

Here is my 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

Wrap the text, move the float: left from .content_p to the wrapper ( underbanner_content ) and give the image the same margin top ( margin-top: 60px; ) 自动换行，将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

I suggest a few changes: 我建议进行一些更改： 

.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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML5和CSS3：对齐图像旁边的文本 - HTML5 & CSS3: Align text next to image 图片与文字对齐-CSS / HTML - Image align with text -CSS/HTML 将文本与HTML / CSS中的图像对齐 - Align text to image in HTML/CSS 如何在HTML / CSS中的“ div”旁边对齐文本？ - How to align text next to a “div” in HTML/CSS? 使用CSS在图像旁边对齐文本 - Align text next to image using css 使用CSS在图像旁边垂直对齐文本 - Align text vertically next to image with CSS 使用CSS无法在图像旁边垂直对齐文本 - Vertically Align Text Next To Image With CSS Not Working 如何使用 HTML 和 CSS 正确右对齐文本以显示在图像旁边 - How to properly right-align text to apeear next to an image using HTML and CSS 如何为我的html / css对齐图像和文本 - How to align image and text for my html/css 使用css和html在图像下对齐文本 - align text under image using css and html
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM