How to center this stuff inside a link using CSS?


Tags: html,css

Problem :

Take a look at the attached image below to see what I am trying to do.

There will be two images :

  • Image1 is what I want

  • Image2 is what my code does.

    The issue is the stuff inside link are not center.

    enter image description here

    <div id="table">
        <table>
            <tr bgcolor="#FFFFFF">
                <td>
                    <a href="google.com">
                        <img src="Images/google.png"  />
                        <span>google</span>
                    </a>
                </td>
            </tr>
        </table>
    </div>
    

    CSS Code

    #table table
    {
        color: #4281A4; /*dark blue*/
        font-weight: bold;
        width: 100%;
    }
    #table table tr td
    {
       border: 1px solid #dedede;
       text-align: center;
       height: 100px;
    }
    #table table tr td:hover
    {
        background-color: #c4c4c4;
    }
    #table table tr td img
    {
        width: 50px;
        height: 50px;
        float: left;
        padding-left:15px;
    }
    #table table tr td a
    {
        display: block;
        height: 100%;
    }
    #table table tr td a span
    {
    }
    


  • Solution :

    Personally, I would make it as simple as possible. Getting rid of <table> is always a good practice.

    Try this using divs, this is very responsive:

    .item {
        overflow: hidden;
        margin-top: 15px;
        border: 1px solid #333;
        border-radius: 6px;
        padding:10px 5px;
    }
    .item-image {
        vertical-align: middle;
        display: table-cell;
        padding-right: 10px;
    }
    .item-image img {
        display: block;
        vertical-align: middle;
        border: 0;
    }
    .item-text {
        display: table-cell;
        vertical-align: top;
       /* width: 10000px;*/
        overflow: hidden;
    }
    .item-text h4 {
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 18px;
    }
    .item-text p {
        margin: 0 0 10px;
    }
    <div class="item">
      <div class="item-image">
        <a href="#">
          <img alt="64x64" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xat1/v/t1.0-1/p100x100/11949449_833184476800206_3651948326998896067_n.jpg?oh=7484c99df5f6b224afeaceb11f2ff5ae&oe=56B161EE&__gda__=1454879689_5f7db9c2e39445f9a2db41a9c5e8e500" style="width: 64px; height: 64px;">
        </a>
      </div>
      <div class="item-text">
        <h4>Your item title</h4>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
          in faucibus.</p>
        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </div>

    Note the use of vertical-align. Example: http://jsfiddle.net/3vp29j85/

    Resize the page, and add/remove more text to see how the image is middle aligned vertically.


      CSS Howto..

      How to achieve this diagonal drop down effect with CSS?

      what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

      How to properly position DIVS on a page to

      How to change css for span in span?

      How do I center my responsive form and align it evenly with everything else?

      How to get a smooth sine wave alternation with Javascript/JQuery CSS

      How to delay the display of the background image in a div

      How to redefine CSS classes with Javascript

      How to remove reference of specific CSS files files from View

      How to override CSS style assigned to element

      Android WebView : how do I control webView height?

      Pure CSS: Show image2 above/over/on top image1 on hover

      How to contain text box in parent div

      How to style 404 page in WAMP server

      How to use css to keep horizontal visible when vertical is auto?

      Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

      How to reset Chrome dev tools CSS styles filter?

      How to change CSS display property using an anchor tag?

      How can I set the body color of a web page to the current width and height of the monitor?

      How do I get this CSS text-decoration override to work?

      How to change a portion of text on hover with css [duplicate]

      how can i get a css table-cell link not to stretch the clickable area

      how to keep the css style after inserting a row to table by jquery

      How to resolve background-image url inside css file while using azure blob storage

      How to remove css class with some effect using jQuery?

      How to get body content to center on page using CSS

      how to move this navigation bar to the right

      How to make two lines text inside list-item element of bootstrap? [closed]

      CSS: How to select first element in each row?

      How to set the CSS class name dynamically in LessCSS?