HTML TEXT ALIGN

Question

<!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: info@badassburgers.eu</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 making a website and very new to html and css. i am trying to align text next to the image but more centered. [image] //words next to eachother. !(https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t35.0-12/12946923_1103488123006439_2107255178_o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7)

Possible duplicate of [Vertically align text next to an image?](http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Aaron, Apr 06 '16 at 08:37
https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t35.0-12/12946923_1103488123006439_2107255178_o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7 — chris, Apr 06 '16 at 08:56
theres a link of the picture. i would like the text centered next to the picture — chris, Apr 06 '16 at 08:57

score 0 · Answer 1 · answered Apr 06 '16 at 09:02

Try dividing the page in 2 columns. One for the .image and other for the .content. Give both display:inline-block;, max-width:50%; so that they don't break when resized (though you should make them appear one below the other in small devices. With @media queries). Apply vertical-align:middle; and voila! You are good to go.

For easier development process use Bootstrap.

* {
  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: info@badassburgers.eu</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>

HTML TEXT ALIGN

1 Answers1