Reputation: 7159

How to center this stuff inside a link using CSS?

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.

<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
{
}

Upvotes: 0

Answers (7)

M.Melih

Reputation: 36

#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;
   margin:15px;
}
#table table tr td a
{
    display: block;
    height: 100%;
  line-height:100px;
}
#table table tr td a span
{
}

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

Upvotes: 0

Piotr Elmanowski

Reputation: 69

if you have fixed width of image you can use function calc in your css code for span and operate with display: inline-block; and vertical-align: middle; for img and span. Look on jsfiddle I've prepared with your modified code: http://jsfiddle.net/z19zcrpL/ it look now:

html:

<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:

#table table
{
    color: #4281A4; /*dark blue*/
    font-weight: bold;
    width: 100%;
}
#table table tr td
{
   border: 1px solid #dedede;
   height: 100px;
}
#table table tr td:hover
{
    background-color: #c4c4c4;
}

#table table tr td img
{
    width: 50px;
    height: 50px;
    padding-left:15px;
}
#table table tr td span {
    width: calc(100% - 65px);
    text-align: center;
}
#table table tr td img,
#table table tr td span
{
    display: inline-block;
    vertical-align: middle;
}

It is possible to do it without cacl function but then your html markup should change.

Upvotes: 0

Professor Abronsius

Reputation: 33823

    <style>
        table#table{
            width:80%;
            border:1px solid black;
            float:none;
            margin:0 auto;
        }
        table#table td{
            display:table-cell;
            vertical-align:middle;
            align:left;
            padding:1rem;
            height:500px;
        }
        #table td img{
            margin:0 1rem 0 1rem;
            clear:none;
        }
        #table td span{
            display:block;
            float:right;
            clear:none;
            width:50%;  
        }
    </style>

    <table id='table'>
        <tr>
            <td>
                <img src='/images/homer_2.png' />
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend nulla et feugiat tincidunt. 
                    Aenean pellentesque erat sed ornare consectetur. Donec condimentum, ipsum nec sodales pulvinar, risus velit 
                    tristique elit, eget blandit orci turpis quis neque. Duis eget velit tortor. Vestibulum ante ipsum primis in
                    faucibus orci luctus et ultrices posuere cubilia Curae; Quisque eget neque tortor. Sed vel magna ut erat 
                    commodo congue. Proin condimentum tortor turpis, at viverra metus hendrerit ut. Donec sed porttitor lorem. 
                    Nam finibus bibendum nulla, lobortis consectetur urna mattis a.
                 </span>
            </td>
        </tr>
    </table>

Upvotes: 1

Frondor

Reputation: 3466

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.

Upvotes: 2

Raviteja

Reputation: 3489

HTML

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

CSS

#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
{
}
#new{
    padding-top:40px;
}

Fiddle:http://jsfiddle.net/iamraviteja/hxthL7rv/1/

Upvotes: 0

Ivin Raj

Reputation: 3429

you can try this one:

  #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%;
    display:inline;
}
#table table tr td a span
{
}

DEMO HERE

Upvotes: -1

Kishan

Reputation: 1190

try this and just change in css

table table tr td a

{ display: block; height: 100%; display:inline; }

#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%;
    display:inline;
}
#table table tr td a span
{
}

<div id="table">
    <table>
        <tr bgcolor="#FFFFFF">
            <td>
                <a href="google.com">
                    <img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"  />
                    <span>google</span>
                </a>
            </td>
        </tr>
    </table>
</div>

Upvotes: 0

How to center this stuff inside a link using CSS?

Answers (7)

table table tr td a

Related Questions