CSS: margin auto и position absolute

Я пытаюсь создать «кнопку» с двумя разделами (каждая составляет 50% от высоты div), разделенной горизонтальной полосой. Каждый из разделов имеет центрированный текст. Размер кнопки будет обрабатываться с помощью javascript, и я пытаюсь избежать использования JavaScript для размещения элементов внутри «кнопки».CSS: margin auto и position absolute

Что мне до сих пор является http://jsfiddle.net/u5u7d31p/2/, но у меня проблема с горизонтальной полосой. Если я изменил положение разделителя на относительный, то стержень центрирован, но затем он изменит положение нижней части текста. Я также могу изменить маржу на статическое значение (margin: 0 63px;), чтобы сосредоточиться на ней, но я бы хотел ее избежать, если есть более простое решение, которое не требует javascript.

.img_overlay .separator{ 
    position: absolute; 
    top: -1px; 
    left: 0; 
    height: 3px; 
    width: 70px; 
    margin: 0 auto; 
    background: #444; 
}

Любые идеи? Благодарю.

источник

2015-02-11 jvilhena

Все коды в порядке. Просто поставьте этот css ниже на .img_overlay .separator класс.

Полный код ниже:

.img_overlay .separator { 
position: absolute; 
top: -1px; 
left: 0; 
height: 3px; 
width: 70px; 
margin: 0 auto; 
background: #444; 
right: 0; 
}

посмотреть мой демо на jsfiddle

источник

2015-02-11 18:44:04

.img{ 
 
    float: left; 
 
    background-repeat:no-repeat; 
 
    background-size:100% 100%; 
 
    border-radius: 4px; 
 
    width: 200px; 
 
    height: 51px; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
.img_overlay{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #222; 
 
    color: #ddd; 
 
    position: relative; 
 
    opacity: 0.8; 
 
} 
 
.img_overlay>div{ 
 
    display: block; 
 
    width: 100%; 
 
    height: 50%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.img_overlay .middle{ 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.img_overlay .separator{ 
 
    height: 3px; 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    background: #444; 
 
}

<div class="img"> 
 
    <div class="img_overlay"> 
 
     <div class="img_show_details"> 
 
      <div class="middle">details</div> 
 
     </div> 
 
     <div class="img_open"> 
 
      <div class="separator"></div> 
 
      <div class="middle">open</div> 
 
     </div> 
 
    </div> 
 
</div>

Все, что я сделал снимала:

.img_overlay .separator{ 
    position: absolute; 
    top: -1px; 
    left: 0; 
}

источник

2015-02-11 16:21:26 tleb

То есть одна из «решений» я упомянул в вопросе (удаление позиции абсолютного), но я стараюсь, чтобы избежать потому что он меняет положение «открытого» текста, поэтому он больше не центрирован. Спасибо в любом случае :) – jvilhena

Я лично не вижу движения * open * ... Chrome 40, а как насчет вас? – tleb

Использование firefox 35. Оно уменьшается на 3 пикселя (я думаю, это, вероятно, высота разделителя). Измените высоту разделителя на 10px и верхнюю на -5px, и вы, вероятно, увидите это более четко. – jvilhena

Это следующее исправление работает хорошо в Firefox и хром, но беспорядок в IE. Я установил height в div, top в middle и top в separator

.img_overlay>div { 
    display: block; 
    width: 100%; 
    height: 40%; 
    text-align: center; 
    position: relative; 
} 
.img_overlay .middle { 
    position: relative; 
    top: 60%; 
    transform: translateY(-50%); 
} 
.img_overlay .separator { 
    position: relative; 
    top: 5px; 
    left: 0; 
    height: 3px; 
    width: 70px; 
    margin: 0 auto; 
    background: #444; 
}

вот демо в jsfiddle.

источник

2015-02-11 16:45:09

CSS: margin auto и position absolute

ответ

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