HTML METİN html ve css için bir web sitesi ve çok yeni yapım

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<style> 
body { 
    background-image: url("bg.jpg"); 
} 
.image{ 
    margin-top:200px; 
    margin-left:50px; 
} 
h1.tx{ 
    margin-top:100px; 
    margin left: 600px; 
} 
<title>Company's Info</title> 

</style> 
</head> 
<body> 
<img class="image" src='about.jpg' width="450" height="300" /> 
<h1 class="tx">About </h1> 
<h2><center>Locations</center></h2> 
<p><center>No 1, Triq San Gorg, St. Julian's, Malta</center></p> 
<h2><center>Contact info</center></h2> 
<p><center>Telephone: +(356) 2138 4066 <br> <br>E-mail: [email protected]</center></p> 
<h2><center>Opening hours</center></h2> 
<p><center>Mon - Thur: 18:00 - 23:00 <br><br> Fri - Sun: 12:00 - 00:00</center></p> 

</body> 
</html>

Am ALIGN. Görüntünün yanında metnini hizalamaya çalışıyorum ama daha ortalanmış. [image] // kelimeler birbirinin yanında. ! (https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t35.0-12/12946923_1103488123006439_2107255178_o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7)HTML METİN html ve css için bir web sitesi ve çok yeni yapım

kaynak

2016-04-06 chris

Olası yinelenen [Dikey bir görselin yanında metni hizalama?] (Http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an- image) – Aaron

Almaya çalıştığınız şey için bir görüntü gösterebiliyor musunuz? –

https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t35.0-12/12946923_1103488123006439_2107255178_o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7 – chris

2 sütunlarda sayfayı bölen deneyin. .image ve .content için bir tane. Yeniden boyutlandırıldığında kırılmamaları için display:inline-block;, max-width:50%; her ikisini de verin (küçük aygıtlarda bunların birbirinin altında görünmesine rağmen. @media sorguları ile). vertical-align:middle; ve voila uygulayın! Senin gitmen iyidir.

Daha kolay geliştirme işlemi için Bootstrap kullanın.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background-image: url("bg.jpg"); 
 
    margin: 0; 
 
} 
 
#container { 
 
    text-align: center; 
 
} 
 
.image { 
 
    max-width: 50%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.image img { 
 
    max-width: 100%; 
 
} 
 
.content { 
 
    text-align: center; 
 
    max-width: 50%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0px 20px; 
 
}

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <title>Company's Info</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="image"> 
 
     <img src='http://i.imgur.com/bCbboKC.jpg' /> 
 
    </div> 
 
    <div class="content"> 
 
     <h1 class="tx">About </h1> 
 
     <h2>Locations</h2> 
 
     <p>No 1, Triq San Gorg, St. Julian's, Malta</p> 
 
     <h2>Contact info</h2> 
 
     <p>Telephone: +(356) 2138 4066 
 
     <br> 
 
     <br>E-mail: [email protected]</p> 
 
     <h2>Opening hours</h2> 
 
     <p>Mon - Thur: 18:00 - 23:00 
 
     <br> 
 
     <br>Fri - Sun: 12:00 - 00:00</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

kaynak

2016-04-06 09:02:39 Roy

HTML METİN html ve css için bir web sitesi ve çok yeni yapım

cevap

İlgili konular