Центрирование значка поверх границы элемента

Я пытаюсь наложить значок поверх границы элемента. Мое текущее решение подразумевает абсолютное позиционирование. Я могу взломать его как можно ближе к центру, используя что-то вроде left: 40%, но как только я изменяю размер окна, он перемещается из центра.

Здесь JSFiddle показывает, что у меня есть до сих пор. Вы увидите, что если вы измените размер окна, значок выйдет из центра. https://jsfiddle.net/83on2jr9/

Есть ли более легкий подход к этому?

Ответ 1

Вы можете использовать margin:0 auto; с position:absolute; - при условии, что у вас есть другие значения:

.landing-section2 .landing-icon {
  position: absolute;
  top:-16px;
  right:0;
  bottom:0;
  left:0;
  width:50px;
  height:50px;
  margin:0 auto;
}

JSFiddle

Ответ 2

Вы можете использовать calc в классе .landing-section2 .landing-icon:

left: calc(50% - 32px);

JSFiddle

Ответ 3

Используйте преобразование CSS. Это отзывчиво и работает для любого элемента размера и не требует магического числа для ширины и полей.

.landing-section2 .landing-icon {
    color: #357ca3;
    font-size: 3em;
    background: #2c2c2c;
    z-index: 1000;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    left: 50%;
    top: 0;
    transform:translate(-50%,-50%); 
}

JSfiddle Demo

Поддержка IE9 и CanIUse.com

Ответ 4

Я нахожу, что при использовании абсолютного позиционирования проще использовать его как включенное в JSFiddle I, обновленное ниже. В принципе, я обертываю "значок" в промежутке и получаю гораздо больший контроль.

.landing-section2 .landing-icon {
    color: #357ca3;
    font-size: 3em;
    z-index: 1000;
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    text-align: center;
}
.landing-icon span {
    display: inline-block;
    padding: 8px;
    background: #2c2c2c;

}

Вот обновленный Fiddle с рабочим кодом: https://jsfiddle.net/83on2jr9/7/

Ответ 5

Я думаю, положил 'margin-left: -32px' - это простой способ переместить его в центр, не изменяя многие другие параметры.

также он динамически перемещается.

Ответ 6

вы можете использовать дисплей и маржу тоже без позиции:) https://jsfiddle.net/83on2jr9/10/

.landing-section2 {
    padding: 50px;
    background-color: #2c2c2c;
    text-align: center;
}
.landing-section2 .col-sm-4 > div {
    border: 1px solid #357ca3;
    padding: 20px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom:2em;
}
.landing-section2 h3 {
    color: white;
    margin-top: 30px;
}
.landing-section2 p {
    color: #ccc;
}
.landing-section2 .landing-icon {
    color: #357ca3;
    font-size: 3em;
    background: #2c2c2c;
    display:table;
    margin:-1em auto 0;
    padding:0 5px;
}

<div class='landing-section2'>
    <div class='container'>
        <div class='row'>
            <div class='col-sm-4 landing-section2-pillar'>
                <div>
                    <div class='landing-icon'>@</div>
                    	<h3>
						Section 1
					</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.</p>
                </div>
            </div>
            <div class='col-sm-4 landing-section2-pillar'>
                <div>
                    <div class='landing-icon'>@</div>
                    	<h3>
						Section 2
					</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.</p>
                </div>
            </div>
            <div class='col-sm-4 landing-section2-pillar'>
                <div>
                    <div class='landing-icon'>@</div>
                    	<h3>
						Section 3
					</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.</p>
                </div>
            </div>
        </div>
    </div>
</div>