Як горизонтально центрувати прольотний елемент всередині поділки

122

Я намагаюся зосередити два посилання «переглянути веб-сайт» та «переглянути проект» всередині навколишнього діва. Чи може хтось вказати, що мені потрібно зробити, щоб зробити цю роботу?

JS Fiddle: http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

css

— J82
джерело

Пов'язаний: stackoverflow.com/questions/7886460 / ...

— Чіро Сантіллі郝海东冠状病六四事件法轮功

Ось два прості способи центрувати елементи в розділі, вертикально, горизонтально або обидва (чистий CSS): stackoverflow.com/a/31977476/3597276

— Майкл Бенджамін

134

Один із варіантів полягає в тому, щоб надати <a>дисплей, inline-blockа потім застосувати text-align: center;до блоку, що містить (також видаліть поплавок):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

— приплив
джерело

1

Це зробило трюк для мене в помірно складній темі, мені потрібно було трохи зламати. Посилання на JSFiddle далі було приголомшливим, що дозволило мені протестувати. Я редагував цей запис, щоб включити, щоб змінити "переповнення: приховано" на "переповнення: приховано;"

— малював ..

1

Виглядає як дуже чисте рішення.

— Джим Ахо

Дивіться відповідь Ахмеда Бахтіті нижче, style = "text-align: center", це набагато більш стисло.

— Уоллес Хоурі

141

Ще одним варіантом буде надати проміжок display:table;і відцентрувати його черезmargin:0 auto;

span {
display:table;
margin:0 auto;
}

— користувач1721135
джерело

4

Завжди цікаво бачити різні рішення на одну і ту ж проблему.

— Джим Ахо

Підтримується лише в браузерах, оновлених протягом останніх кількох років. caniuse.com/#feat=css-table

— CamHart

1

найкраще рішення ІМО

— Martijn Scheffer

10

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

— Ахмед Бахтіті
джерело

8

Застосування inline-blockдо елемента, який повинен бути в центрі, та застосування text-align:centerдо батьківського блоку зробив для мене трюк.

Працює навіть на <span>тегах.

— Талха Імам
джерело

1

Проміжки можуть бути дещо складними для вирішення. якщо встановити ширину проміжку викладання, можна використовувати

margin: 0 auto;

централізувати їх, але вони закінчуються на різних лініях. Я б запропонував спробувати інший підхід до вашої структури.

Ось jsfiddle, яку я піднімаю з верхньої частини голови: jsFiddle

Редагувати:

Відповідь Adrift - це найпростіше рішення :)

— Девід Зіманн
джерело

0

Я припускаю, що ви хочете зосереджувати їх на одній лінії, а не на двох окремих лініях на основі вашої загадки. Якщо це так, спробуйте наступний css:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

Я видалив поплавок, оскільки ви хочете його відцентрувати, а потім зробив проміжок навколо посилань по центру, додавши до них margin: 0 auto. Нарешті я додав статичну ширину до прольоту. Це центрирує посилання на одній лінії в червоному розділі.

— Duffmaster33
джерело

0

тільки css div ви можете зосереджувати вміст

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/

— MrBii
джерело