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

Question

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

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

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

Answer 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

Answer 2

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

left: calc(50% - 32px); 

JSFiddle

Answer 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

Answer 4

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

.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/

Answer 5

Я думаю, поставить «Левое поле: -32px» является простым способом, чтобы переместить его в центр, не меняя много других вариантов.

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

Answer 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> 
 
        \t <h3> 
 
\t \t \t \t \t \t Section 1 
 
\t \t \t \t \t </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> 
 
        \t <h3> 
 
\t \t \t \t \t \t Section 2 
 
\t \t \t \t \t </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> 
 
        \t <h3> 
 
\t \t \t \t \t \t Section 3 
 
\t \t \t \t \t </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>