Как создать вертикально центрированные границы встреч на div?

0

Вот что я до сих пор: http://jsfiddle.net/F8AN4/

Я хочу, чтобы граница с каждой стороны div была вертикально центрирована и указывала на левую/правую стороны экрана. Я видел, как это много делало, но не может, чтобы жизнь меня определяла, как это сделать!

Это будет выглядеть так:

-----|DIV|------

CSS

div {
    background: lightgreen;
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 200px;
}   

div::after {
    border-right: 10px solid black; // not sure how to do this.
    content: "";
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;    
}

div::before {
    content: "";
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;    
}

Есть идеи?

  • 0
    Можете ли вы показать нам изображение того, что вам нужно (загрузить изображение на imgur и поделиться его URL)
Теги:

3 ответа

4
Лучший ответ

Вам понадобятся два контейнера для упаковки: внутренний div, содержащий контент, и внешний div:

<div class="outer">
    <div class="inner"></div>
</div>

CSS прост - внешний div должен иметь ширину 100% (так что псевдоэлемент может растягиваться до полной ширины), а внутренний div может иметь ширину, которую вы обозначили позже.

.inner {
    background: lightgreen;
    height: 100px;
    margin: 0 auto;
    width: 200px;
}
.outer {
    position: relative;
    width: 100%;
}
.outer:before {
    border: 1px solid #000;
    box-sizing: border-box;
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Свойство CSS transform используется для обеспечения того, чтобы псевдоэлемент был идеально вертикально центрирован - это имеет значение, когда горизонтальная линия, которую вы хотите, толстая.

Если вам нужны нечетные размеры для горизонтальной линии, вы можете указать высоту одной границы, то есть border-top: 1px solid #000; , или отказаться от свойства границы и установить высоту и фоновый цвет. Он работает в любом случае :)

http://jsfiddle.net/teddyrised/F8AN4/9/

[Изменить]: удалить нижнее поле на внешнем div, для работы кода не было необходимости;)

Поделиться
  • 0
    Вам просто нужно добавить левую / правую границы в .inner и все готово.
  • 0
    @MarcAudet Это не будет работать, потому что левая и правая границы будут охватывать всю высоту элемента. Насколько я понимаю запрос OP, он хотел что-то более похожее на линию, а не на полную высоту.
Показать ещё 3 комментария
3

FIDDLE

HTML

<div><span>TEXT</span></div>

CSS

div {
    margin-top:10px;
    height: 1px;
    border-top: 1px solid black;
    text-align: center;
    position: relative;
}
span {
    position: relative;
    top: -.7em;
    background: lightgreen;
    display: inline-block;
    border-width:0 2px;
    border-color:black;
    border-style:solid;

}
Поделиться
  • 0
    Спасибо, это то, что я искал ... но есть ли способ, который не требует дополнительной разметки и жестко закодированных длин? Размер шрифта будет динамическим для div.
  • 1
    Вам нужна дополнительная разметка, чтобы получить какой-либо контроль стиля над элементом текста (в частности, отступы и цвет фона). Вам нужен родительский / внешний div для генерации и размещения горизонтальной линии, а дочерний / внутренний div для размещения и оформления текста.
0

Это то, что вы ищете?

http://jsfiddle.net/F8AN4/3/

Я думаю, есть более красивый способ сделать это, может быть, у кого-то есть лучшая идея :)

<div id="main">
    <div class="hrleft"></div>
    <div class="mid"></div>
</div>

div.hrleft {
    height: 45px;
    width: 200px;
    border-bottom: 10px solid black;
    float: left;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню