Vertically align div in html

Question

Take a look at the screenshot below:

I'd like to vertically center the elements in the yellow box, and align them so that the images are all in one vertical line. The image below shows what I'd like to achieve:

Here's the code:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  color: #242323;
}

.centered {}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="column" style="background-color: #ECA73F; height: 450px;">
  <div class="centered" ">
            <div class="container ">

                <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Phone Icon.png " style="width: 5%; ">
                <p style="padding-left: 20px; "><strong>Telephone</strong>: +94 (0)11 5 828468</p>

            </div>

            <div class="container ">

                <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Fax Icon.png " style="width: 5%; ">
                <p style="padding-left: 20px; "><strong>Fax</strong>: +94 (0)11 2 931086</p>

            </div>

            <div class="container ">

                <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Email Icon.png " style="width: 5%; ">
                <p style="padding-left: 20px; "><strong>E-Mail</strong>: <a id="emladd " href="mailto:group@nawaloka.lk ">group@nawaloka.lk </a></p>

            </div>

            <div class="container ">

                <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Location Icon.png " style="width: 5%; ">
                <p style="padding-left: 20px; "><strong>Address</strong>: Some Address</p>

            </div>
        </div>
    </div>

Appreciate the feedback!

Does this answer your question? [How to Vertical align elements in a div?](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — Nik, Jan 10 '21 at 18:27
Hey, I tried the solutions there, but none of them worked :/ @Nik — Abdullah Ajmal, Jan 10 '21 at 18:30

score 0 · Answer 1 · answered Jan 10 '21 at 18:33

You have to use

  display: flex;
  align-items: center;
  justify-content: center;

on your parent div. I've added it to column class. Check snippet below.

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  color: #242323;
  display: flex;
  align-items: center;
  justify-content: center;  
}

.centered {}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="column" style="background-color: #ECA73F; height: 450px;">
  <div class="centered" ">
        <div class="container ">

            <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Phone Icon.png " style="width: 5%; ">
            <p style="padding-left: 20px; "><strong>Telephone</strong>: +94 (0)11 5 828468</p>

        </div>

        <div class="container ">

            <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Fax Icon.png " style="width: 5%; ">
            <p style="padding-left: 20px; "><strong>Fax</strong>: +94 (0)11 2 931086</p>

        </div>

        <div class="container ">

            <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Email Icon.png " style="width: 5%; ">
            <p style="padding-left: 20px; "><strong>E-Mail</strong>: <a id="emladd " href="mailto:group@nawaloka.lk ">group@nawaloka.lk </a></p>

        </div>

        <div class="container ">

            <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Location Icon.png " style="width: 5%; ">
            <p style="padding-left: 20px; "><strong>Address</strong>: Some Address</p>

        </div>
    </div>
</div>

Oh nice, this solves the first problem (Vertically aligning the elements) thanks. Do you know how I could align the elements in one vertical line like in the image? — Abdullah Ajmal, Jan 10 '21 at 18:36
for that you should change your HTML to use either a html table or use css-grid to align the items — tacoshy, Jan 10 '21 at 18:46

score 0 · Answer 2 · answered Jan 10 '21 at 18:58

0

A CSS-Grid addition so you can correctly align the tiems as asked in the comments:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  color: #242323;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered {}

.container {
  display: grid;
  grid-template-columns: min-content min-content;
  margin: 0 auto;
}

.container p {
  white-space: nowrap;
}

<div class="column" style="background-color: #ECA73F; height: 450px;">
  <div class="centered">
    <div class="container">
      <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Phone Icon.png" style="width: 5%;">
      <p style="padding-left: 20px; "><strong>Telephone</strong>: +94 (0)11 5 828468</p>
      <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Fax Icon.png" style="width: 5%;">
      <p style="padding-left: 20px;"><strong>Fax</strong>: +94 (0)11 2 931086</p>
      <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Email Icon.png" style="width: 5%;">
      <p style="padding-left: 20px;"><strong>E-Mail</strong>: <a id="emladd" href="mailto:group@nawaloka.lk ">group@nawaloka.lk </a></p>
      <img src="/Users/ajmal/Documents/Work/GlidAR Work/Nawaloka Website/Images/Location Icon.png " style="width: 5%;">
      <p style="padding-left: 20px;"><strong>Address</strong>: Some Address</p>
    </div>
</div>

answered Jan 10 '21 at 18:58

tacoshy

10,642
5
17
34

Hey, the images are missing :/ – Abdullah Ajmal Jan 10 '21 at 19:01
they are not missing, the link is just relative, therefor they cant load the images and they are not displayed. If you isnert the full image path or running it on your server where the images will actually be found, then they will display. The width is `min-content`, means they take only as much space as needed. Without images, the width is 0. – tacoshy Jan 10 '21 at 19:27
They are actually missing, I added this code to my project but the images didn’t show up. Run the other answer and see, you can see the image box or whatever but your answer doesn’t have that – Abdullah Ajmal Jan 10 '21 at 19:34
like I explained, the width is min-content. So the row where the sit in will be reduced to 0 unelss the images are actually there. Thats why you wont see the icons. The source link you provided is also invalid as there are multiple `space` within the link. – tacoshy Jan 10 '21 at 19:36
The images aren’t showing up when I run the project in my machine – Abdullah Ajmal Jan 10 '21 at 19:39
The source link is valid btw or how would the images show up then – Abdullah Ajmal Jan 10 '21 at 19:41

Vertically align div in html

2 Answers2