Css выровнять по центру td с двумя плавающими элементами

У меня есть таблица, в которой мне нужно все содержимое для выравнивания по центру, и в одном td у меня есть изображение с интервалом после изображения. Мне нужно, чтобы все изображения в tr td были выровнены по вертикали, поэтому я применил float слева к ним, но я освободил центр выравнивания. Какое решение для этого?Css выровнять по центру td с двумя плавающими элементами

<body> 
    <table class="table table-striped"> 
    <tr> 
     <td> 
     <img src="http://placehold.it/50x20" alt=""> 
     <span>short text</span> 
     </td> 
     <td>some text</td> 
     <td>some text</td> 
     <td>some text</td> 
    </tr> 
     <tr> 
     <td> 
     <img src="http://placehold.it/50x20" alt=""> 
     <span>longer text text</span> 
     </td> 
     <td>some text</td> 
     <td>some text</td> 
     <td>some text</td> 
    </tr> 
    </table> 
    </body> 

.table tr td { 
    text-align: center; 
} 
.table tr td:first-child span, .table tr td:first-child img { 
float:left; 
} 

.table tr td:first-child img { 
    margin-right: 5px; 
}

plunker: http://plnkr.co/edit/D4VbnesF3FnwnNHI25nB?p=preview

мне нужно изображения быть выровнены со всеми другими изображениями, а также в пролете.

источник

2015-01-12 Anonymous

Нет проблем, когда я удалить 'поплавок: слева;', изображения вертикально по центру. Вы можете добавить 'vertical-align: middle;', если хотите. – panther

Нет, мне нужно показать ту же вертикальную линию –

Является ли это то, что вы хотите

CSS

.table{ width: 100%; 
     position:relative; 
} 

.table tr td { 
    text-align: center; 
    position:relative; 
} 
.table tr td:first-child img { 
    vertical-align: middle; 
} 

.table tr td:first-child:before { 
    position: absolute; 
    display: inline-block; 
    left: 0px; 
    top:50%; 
    background: url(http://placehold.it/50x20) no-repeat 0; 
    width: 50px; 
    height: 50px; 
    margin-top: -25px; 
    content:""; 
} 



<img src="http://placehold.it/50x20" alt=""> 

.table tr td:first-child span { 
text-align: center; 
} 

.table tr td:first-child img { 
    margin-right: 5px; 
}

DEMO HERE

источник

2015-01-12 11:53:12

Нет, мне нужно, чтобы они были такими, какие они есть, но по центру. –

Хорошо .. обновляю демо и css. Это то, что вы хотите? –

Мне нужны изображения для выравнивания со всеми остальными изображениями, а также с диапазоном. –

Если вы хотите, чтобы быть в центре по горизонтали и по вертикали необходимо удалить поплавок положить вертикальный -высокое: среднее

Нравится:

<td style="text-align:center;vertical-align:middle;"> 
    <img src="" style="display:inline-block;" /> 
</td>

Конечно, вы можете также сделать это с помощью классов ...

источник

2015-01-12 11:57:16 Kup

Изображения не в той же вертикальной линии. –

Извините, я не понимаю, что вы подразумеваете под «не в той же вертикальной линии»? – Kup

Мне нужны изображения для выравнивания со всеми остальными изображениями, а также диапазон –

Css выровнять по центру td с двумя плавающими элементами

ответ

Смежные вопросы