Reputation: 424

alignment of text with image in table

I have a table that looks like this in the browser (note blue background is just there for visual aid).

As you can see, there is some space at the bottom of my image. No matter what I do, I cannot get it to align vertically. Basically, I want the text and the image to be centered in the middle of the page. Something similar to this image where the image and text are centered:

This is my full code: https://embed.plnkr.co/plunk/cvLKUyuZUXQaHW1A

HTML Code:

<!DOCTYPE html>
<html>

<body>



    <div class="stories-main-content">
        <h1>
            Our Stories & Blog Posts
        </h1>

        <table class="main-stories-table">
            <tr>
                <td class="main-stories-table-cell">
                    <img src="https://i.imgur.com/X7PaMwB.jpg" alt="haze.jpg" class="story-icon">
                </td>

                <td class="main-stories-table-cell">
                    <div class="story-dets">
                        <h3>
                            The Haze - More Than Just An Inconvenience
                        </h3>

                        <p>
                            If you’ve lived or are still living in Southeast Asia, you would be familiar with the haze
                            that has plagued all of Indonesia’s neighbouring countries and has been an annual problem
                            for all ASEAN countries. So let’s take a look at what exactly causes the haze in Southeast
                            Asia, the effects and some solutions.
                        </p>

                        <button class="btn-readmore"><i class="fas fa-eye"></i> Read More!</button>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="main-stories-table-cell">
                    <img src="https://i.imgur.com/s9iqB8O.png" alt="haze.jpg" class="story-icon">
                </td>

                <td class="main-stories-table-cell">
                    <div class="story-dets">
                        <h3>
                            Climate Change: Hoax or Reality
                        </h3>

                        <p>
                            Climate change is the name given to long term changes to weather and temperature on and
                            around the earth’s surface, which causes long term shifts to weather patterns. So why do
                            people think climate change is a hoax?
                        </p>

                        <button class="btn-readmore"><i class="fas fa-eye"></i> Read More!</button>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="main-stories-table-cell">
                    <img src="https://i.imgur.com/2pRE3Va.jpg" alt="haze.jpg" class="story-icon">
                </td>

                <td class="main-stories-table-cell">
                    <div class="story-dets">
                        <h3>
                            Is Climate Change Really A Problem For Me?
                        </h3>

                        <p>
                            With all this talk about global warming going around, you might be wondering, does it
                            actually affect you? Today, we’ll be delving into the impact that climate change has on the
                            individual living in ASEAN countries.
                        </p>

                        <button class="btn-readmore"><i class="fas fa-eye"></i> Read More!</button>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="main-stories-table-cell">
                    <img src="https://i.imgur.com/9BzqX1D.jpg" alt="haze.jpg" class="story-icon">
                </td>

                <td class="main-stories-table-cell">
                    <div class="story-dets">
                        <h3>
                            Plastic Usage: More than just a turtle's nightmare
                        </h3>

                        <p>
                            Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                            text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                            text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                        </p>

                        <button class="btn-readmore"><i class="fas fa-eye"></i> Read More!</button>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="main-stories-table-cell">
                    <img src="https://i.imgur.com/8hJCJPe.jpg" alt="haze.jpg" class="story-icon">
                </td>

                <td class="main-stories-table-cell">
                    <div class="story-dets">
                        <h3>
                            Circular Economy: Why are edible food items ends up in Landfills?
                        </h3>

                        <p>
                            Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                            text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                            text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                        </p>

                        <button class="btn-readmore"><i class="fas fa-eye"></i> Read More!</button>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="main-stories-table-cell">
                    <img src="https://i.imgur.com/4ZMcOZU.jpg" alt="haze.jpg" class="story-icon">
                </td>

                <td class="main-stories-table-cell">
                    <div class="story-dets">
                        <h3>
                            A peek into the bleak future with no action: Climate Change Projections.
                        </h3>

                        <p>
                            Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                            text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                            text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
                        </p>

                        <button class="btn-readmore"><i class="fas fa-eye"></i> Read More!</button>
                    </div>
                </td>
            </tr>

        </table>
    </div>

</body>

</html>

CSS Code:

/* 
/* i. Stories
/* =================================================================== */

.stories-main-content {
  margin-top: 100px;
  color: white;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  table-layout: fixed;
  vertical-align: middle;
}

.stories-main-content h1 {
  font: 40px "raleway-heavy", sans-serif;
}

.stories-main-content h3 {
  font: 20px "raleway-heavy", sans-serif;
  text-align: left;
}

.stories-main-content p {
  font: 15px "Montserrat", sans-serif;
  text-align: justify;
}

.main-stories-table {
  margin: auto auto;
  display: table;
  vertical-align: middle;
}

.main-stories-table-cell {
  margin: auto auto;
  display: table-cell;
  vertical-align: middle;
  background-color: #0077b5;
  border: 10px;
  border-color: #ffffff;
}

.story-icon {
  height: 200px;
  width: 200px;
  margin: auto auto;
  margin-bottom: 40px;
  vertical-align: middle;
}

.story-dets {
  padding-left: 40px;
  margin-bottom: 40px;
  margin: auto auto;
  vertical-align: middle;
}

.btn-readmore {
  font-display: "Montserrat", sans-serif;
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  float: left;
}

Upvotes: 1

Answers (3)

Prakash Rajotiya

Reputation: 1033

I Got your point. This is happening due to you have applied margin-bottom: 40px; in your image selector(.story-icon).

Just you need to do only two things.

Remove margin-bottom: 40px; from ".story-icon" class selector.
if you want space below and above the image then please apply padding on "td".

Please have a look on below CSS.(I have commented what I have done in CSS)

.story-icon {
  height: 200px;
  width: 200px;
  margin: auto auto;
  margin-bottom: 40px; /*remove it*/
  vertical-align: middle;
}


.main-stories-table-cell {
  margin: auto auto;
  display: table-cell;
  vertical-align: middle;
  background-color: #0077b5;
  border: 10px;
  border-color: #ffffff;
  padding:10px; /* New added*/
}

Upvotes: 0

Ruven Guna

Reputation: 424

So I had to adapt @arsalhkan's answer to get the output I want. These are the changes I made:

Specified margin left/right and width with a percentage

.main-stories-table {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  vertical-align: middle;
}

Change width: 100%; to width: auto;

.img-vertical {
  display: block;
  width: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.img-horizontal {
  display: block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

This is the final product:

Upvotes: 1

arsal khan

Reputation: 104

You can align your text by text-align property for text and for image to be aligned you should add the following code for vertical and horizontal respectively.

For vertical:

.img-vertical
{
        display:block;
        width:100%;
        margin-top:auto;
        margin-bottom:auto;
}

For Horizontal:

.img-horizontal
{
        display:block;
        width:100%;
        margin-left:auto;
        margin-right:auto;
}

Upvotes: 0

alignment of text with image in table

Answers (3)

Related Questions