Задача CSS, могу ли я сделать это, не вводя больше HTML?

Представьте, что у меня есть любой блок или встроенный блок с текстом в нем. Как параграф или li или что-то еще. Если этот тег имеет класс «разделитель», я хочу, чтобы он выглядел следующим образом:

Весь контент центрирован (text-align: center; будет достаточно). Вот сложная часть: по обе стороны от центрированного содержимого появляется (вертикально центрированная) линия.

Следующее изображение иллюстрирует мою идею:

Примерный пример того, как я хотел бы, чтобы это выглядело (хотя для этого используется текст ... & quot; ------ РАЗДЕЛИТЬ ------ & quot;

Если мне нужно ввести больше HTML, тогда забудьте об этом - не интересно.

Я давний пользователь CSS, но не могу понять это ... У кого-нибудь еще есть идея? Как бы мне это ни нравилось, желательно без CSS3 (для работы ... не могу использовать новые вещи из-за совместимости) ..

Пример задачи: <p class="separator">CENTRE ME</p>

12 голосов | спросил Bilal Akil 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 29 Sep 2012 03:18:04 +0400 2012, 03:18:04

6 ответов


0

Это работает в Firefox:

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

JSFiddle Demo

ответил Neil 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 29 Sep 2012 03:50:40 +0400 2012, 03:50:40
0

Я разработал решение, которое не опирается на background: white, то есть вы можете увидеть, что стоит за текстом разделителя. Просто запустите образец, и вы увидите это:

 введите описание изображения здесь

Не обращайте внимания на все эти грязные вкладки на этом рисунке ... это пример CSS, а не пример организации.

 .separator>*{
  display: inline-block;
  vertical-align: middle;
}
.separator {
    text-align: center;
    border: 0;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.separator:before, .separator:after {
    content: "";
    height: 2px;
    width: 50%;
    background-color: gray;
    margin: 0 5px 0 5px;
    display: inline-block;
    vertical-align: middle;
}
.separator:before {
    margin-left: -100%;
}
.separator:after {
    margin-right: -100%;
}
 <div class="texture texture1 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture2 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture3 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture4 light-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>

<style>
  
/**

STYLES TO MAKE THE BACKGROUND HAVE PATTERNS WHICH ARE NOT SOLID WHITE,
SO THAT YOU CAN SEE THAT IT IS VISIBLE BEHIND THE SEPARATOR.

**/

.light-theme .separator:before, .light-theme .separator:after {
  background-color: black;
}
.light-theme .separator, .light-theme .separator {
  color: black;
}
.dark-theme .separator:before, .dark-theme .separator:after {
  background-color: white;
}
.dark-theme .separator, .dark-theme .separator {
  color: white;
}

.texture {
  padding: 10px;
}

.texture3 {
  background-color: red;
  color: white;
}

.texture1 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
}

.texture2 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: -moz-linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
  background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
}

.texture4 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgba(255,255,255,1);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background-position: auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 50px 50px;
  background-size: 50px 50px;
}
</style>

П.С .: Использованные мной фоновые примеры не являются моими творениями. Я получил их на enjoycss.com . Красный фон, ну, это тоже не моё творение, ни их ... чье-то творение, может быть. Кто создал red ... я не знаю. Если вы сделали, и я не дал кредит, пожалуйста, оставьте записку в комментариях.

ответил Miguel Angelo 3 FebruaryEurope/MoscowbWed, 03 Feb 2016 21:31:44 +0300000000pmWed, 03 Feb 2016 21:31:44 +030016 2016, 21:31:44
0

Извините, что сломал это для вас, но в HTML /CSS нет способа сделать это без добавления хотя бы одного дополнительного тега.

Единственное, что может приблизить его, это использовать псевдоклассы: before и: after, но он не имеет возможности вставлять html-контент, тем более что он имеет переменную ширину в зависимости от содержимого.

ответил Tor Valamo 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 29 Sep 2012 03:32:01 +0400 2012, 03:32:01
0

Вот, пожалуйста.

<p class="separator"></p>

p.separator {
    line-height:1em;
    border-bottom:1px solid red;
}
p.separator:before {
    content:"TEXT";
    position:relative;
    left:50%;
    margin-left:-2.5em; /* half the number of chars */
    padding:0 0.3em;
    top:0.5em;
    background:white;
}

Демо

ответил Giona 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 29 Sep 2012 03:35:54 +0400 2012, 03:35:54
0

Вы можете использовать фоновое изображение для линии, а затем дать тексту серию черных теней для текста, чтобы эмулировать обводку в 2-3 пикселя, покрывая фон, непосредственно окружающий и находящийся между текстом.

Т.е. Граница шрифта CSS?

http://jsfiddle.net/4mPkU/ - пример

Обратная совместимость будет проблемой, основанной на поддержке тени текста. (Существует фильтр IE, который может помочь с совместимостью).

ответил Nw167 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 29 Sep 2012 10:27:17 +0400 2012, 10:27:17
0

Чтобы сделать что-то динамическое, вы можете сделать что-то вроде:

<ul>
    <li>
        <div class='lineLeft'></div>
        <div class='inlineText'></div>
        <div class=lineRight'></div>
    </li>
</ul>

По сути, здесь вы должны стилизовать div 'inlineText' для центрирования (теперь это не должен быть div, просто идея), а затем оба элемента 'lineLeft' и 'lineRight' будут иметь стиль float left /соответственно, с высотой, равной половине высоты тега элемента родительского списка. Затем задайте каждой стороне div нижнюю границу в css.

Это самое динамичное решение, которое я могу придумать, не задумываясь. Это немного больше HTML, но он позволит достичь ваших целей должным образом, при условии, что вы можете получить все по размеру правильно.

Дайте нам знать. Удачи.

ответил dudewad 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 29 Sep 2012 03:25:00 +0400 2012, 03:25:00

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132