2016-10-22 46 views
-1

我現在有這個從我的CSS & HTML: enter image description here下一個對齊圖像文本HTML和CSS

不過,我想將圖像與標題文本對齊,這樣的: enter image description here

我將如何做到這一點?我已將文字向左移動,圖像向右移動。

這裏是我的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>

回答

1

自動換行,從.content_p移動float: left到包裝(underbanner_content),並給予圖像相同幅度最高(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>

1

我提出幾個變化:

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