Как выровнять текст и дочерний узел с помощью CSS?

У меня есть HTML формыКак выровнять текст и дочерний узел с помощью CSS?

<div class="display_archive"> 
    <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div> 
    <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div> 
    <div class="campaign">02/26/2016 - <a href="omitted>Go Go Year of Big Changes</a></div> 
</div>

, который выглядит как

05/01/2016 - Назад от
02/28/2016 Филиппины - специального запроса молитвы: Go Филиппины
02/26/2016 - Go Go Год больших изменений

Без изменения HTML, как я могу использовать CSS для выравнивания по дефису -? Например, если бы я хотел, чтобы выровнять, что дефис на 1/3, содержащей `DIV, он может выглядеть следующим образом:

источник

2016-10-02 Merchako

Вы можете использовать display: table с margin: 0 auto на родителей.

.display_archive { 
 
    margin: 0 auto; 
 
    display: table; 
 
}

<div class="display_archive"> 
 
    <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div> 
 
    <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div> 
 
    <div class="campaign">02/26/2016 - <a href="omitted">Go Go Year of Big Changes</a></div> 
 
</div>

источник

2016-10-02 19:31:05

Это, кажется, отличается от того, что я имел в виду, но я думаю, что мне больше нравится. Если бы вы описали это вне контекста моего вопроса, как бы вы это назвали? – Merchako

Не уверен, что вы имеете в виду, вы просто центрируете родительский элемент или 'display_archive' в этом случае относительно' body'. Вы можете сделать то же самое, что и https://jsfiddle.net/Lg0wyt9u/1254/, но я думаю, что другое решение лучше. –

Если вы изучили эту концепцию, чтобы узнать больше об этом, что бы вы сделали Google? – Merchako

Вы можете выровнять теги привязки, вместо дефиса, например:

.display_archive { 
 
    display: table; 
 
} 
 
.campaign { 
 
    display: table-row; 
 
} 
 
.campaign a { 
 
    display: table-cell; 
 
    padding-left: .5em; 
 
}

<div class="display_archive"> 
 
    <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div> 
 
    <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div> 
 
    <div class="campaign">02/26/2016 - <a href="omitted">Go Go Year of Big Changes</a></div> 
 
</div>

Это делает браузер лечить Outter DIV как таблицу и определяет ваши якорные метки как ячейки. Это заставляет браузер отображать текст перед тэгом привязки, как ячейка таблицы (предшествующей). Таким образом, все ваши привязывающие метки выравниваются в одном столбце (2-й).

Вот полезная информация о display: table для дальнейшего чтения:

Обратите внимание, что вы, возможно, придется проверить, если это поддерживается в IE7 или ниже, если вам нужно поддерживать эти браузеры.

источник

2016-10-03 00:20:20

Как выровнять текст и дочерний узел с помощью CSS?

ответ

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