CODEWITHSUNDEEP
htmlcsshtml-tablecenter
John
John

Reputation: 17

Centering text below an image using a table and td

I'm making a website and I'm adding a table with pictures in it, and I am unable to center the text underneath the table in the following td cells. My current code has it offset to the left instead of directly underneath it. Here is my code:

Html:

<body>
<section>
<section id="pictures">
    <div>
        <img src="images/ritual4.jpg" id="slide" class="floatLeft" alt="This is a picture of a group of young men posing and smiling">
        <script language="JavaScript">slideIt();</script>
        <p>Ritual and Mills Music Mission</p>
        <img src="images/ossian.jpg" alt="This is a picture of a group of dressed up men posing with an older gentleman.">
        <p>Spaghetti Dinner Fall 2015</p>
    </div>
</section>
    <section id="main">
    <h1>Members</h1>
    <hr>
<div class="title">
    <table>
        <tr>
            <td><img src="images/david.jpg" alt="This is a picture of David, President of the Gamma Beta Chapter."></td>        
            <td><img src="images/matth.jpg" alt="This is a picture of Matt Halverson, Vice-President of the Gamma Beta Chapter."></td>      
            <td><img src="images/zack.jpg" alt="This is a picture of Zack Bartsch, Secretary of the Gamma Beta Chapter."></td>      
            <td><img src="images/jacobandpete.jpg" alt="This is a picture of Jacob Walter, Tresurer of the Gamma Beta Chapter."></td>       
        </tr>   
        <tr>
            <td><p id="center">XXX</p></td>     
            <td><p id="center">XXX</p></td>
            <td><p id="center">XXX</p></td>
            <td><p id="center">XXX</p></td>
        </tr>

CSS:

.title{
    text-align: center;
    width:100%;
}
table{
    margin-right: auto;
    margin-left: 45px;
    border-width: 1px;
}
#center{
    display: table-cell;
    vertical-align: center;
    font-size: 12px;
    margin-left: 115px;
}
td img{
    display: table-cell;
    vertical-align: center;
    width:55%;
    height:5%;
    ms-transform: rotate(90deg); /* IE 9 */
   webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
   transform: rotate(90deg);
}

Upvotes: 0

Views: 864

Answers (2)

Asons
Asons

Reputation: 87191

Your html has some flaws you need to address, like setting multiple id with same name like the p tag having "center", so I took out the "table" part to show how to center the text.

td img{
    width:55%;
    height:25%;
}
td, p {
  text-align: center
}
    <table>
        <tr>
            <td><img src="images/david.jpg" alt="This is a picture of David, President of the Gamma Beta Chapter."></td>        
            <td><img src="images/matth.jpg" alt="This is a picture of Matt Halverson, Vice-President of the Gamma Beta Chapter."></td>      
            <td><img src="images/zack.jpg" alt="This is a picture of Zack Bartsch, Secretary of the Gamma Beta Chapter."></td>      
            <td><img src="images/jacobandpete.jpg" alt="This is a picture of Jacob Walter, Tresurer of the Gamma Beta Chapter."></td>       
        </tr>   
        <tr>
            <td><p class="center">XXX</p></td>     
            <td><p class="center">XXX</p></td>
            <td><p class="center">XXX</p></td>
            <td><p class="center">XXX</p></td>
        </tr>
    </table>

Upvotes: 1

Adam McKenna
Adam McKenna

Reputation: 2445

If you are attempting to center horizontally you could try

#center{
    display: table-cell;
    position: absolute; // position p tag absolute
    vertical-align: center;
    font-size: 12px;
    margin-left: 0; // remove the margin
}

This should do the trick.

Upvotes: 0

Related Questions