table table tr td a

Question

请查看下面的附图，看看我想要做什么。

会有两张图片：

Image1就是我想要的

Image2是我的代码所做的。

问题是链接内的东西不是中心。

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

Answer 1

就个人而言，我会尽量简单。摆脱<table>总是一种很好的做法。

尝试使用div，这是非常敏感的：

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

请注意vertical-align的使用。示例： http://jsfiddle.net/3vp29j85/

调整页面大小，添加/删除更多文本以查看图像如何垂直居中对齐。

Answer 2

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

Answer 3

尝试这个，只需更改css

table table tr td a

{ 显示：块; 身高：100％; 显示：内联; }

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

Answer 4

<强> 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;
}

小提琴：http://jsfiddle.net/iamraviteja/hxthL7rv/1/

Answer 5

如果你有固定的图像宽度，你可以在你的css代码中使用函数calc作为span，并使用display：inline-block;和vertical-align：middle;对于img和span。看看jsfiddle我已经准备了你修改过的代码：http://jsfiddle.net/z19zcrpL/现在看起来：

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

可以在没有cacl函数的情况下执行此操作，但随后您的html标记应该更改。

Answer 6

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

你可以尝试这个：

  #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

如何使用CSS将这些内容集中在链接中？

7 个答案:

table table tr td a