Как центрировать элемент внутри div

Я хочу сосредоточить содержимое .SideBarFirst div, но не знаю, как этого достичь.Как центрировать элемент внутри div

Может ли кто-нибудь помочь мне с решением, которое не основано на добавлении padding или left/right значений к элементу?

CSS:

body { 
    width: 960px; 
    margin: 0 auto; 
} 

.content { 
    width:500px; 
    float: left; 
} 

.SideBarFirst { 
    width:460px; 
    float: right; 
} 

.SideBarFirst div { 
    width: 40px; 
    margin: 0 auto; 
}

HTML:

<body> 
    <div class="content">test</div> 
    <div class="SideBarFirst"> 
     <div>not working for center</div> 
    </div> 
</body>

Мой текущий код: http://jsfiddle.net/mmnaderi/yTCkx/

источник

2013-07-28 masoud soroush

Сначала удалите ширину и край: 0 auto в теле – Hushme

Вот два простых метода для центрирования элемента внутри div, вертикально, горизонтально или оба (чистый CSS): http://stackoverflow.com/a/31977476/3597276 –

Yup display table и flex не являются безопасным решением для отзывчивого веб-сайта! Пример: показать большое изображение в таблице отображения этой шкалы div и более 100%. –

это проблема браузера и теперь фиксирована.

источник

2017-06-25 08:16:08

просто удалить это:

body { 
    width: 960px; 
    margin: 0 auto; 
}

использовать это:

HTML

<div class="content">test</div> 
<div class="SideBarFirst"> 
    <div>not working for center</div> 
</div>

CSS:

.content {width:500px; float : left;} 

.SideBarFirst {width:460px; float : right;} 

.SideBarFirst div { 
    width: 40px; 
    margin: 0 auto; 
}

See This Fiddle

источник

2013-07-28 12:10:40

что было не так в его css – Hushme

см. Мой ответ снова –

Я видел это, вы только что удалили css из тела – Hushme

Вы можете использовать%

.SideBarFirst div { 
    width: 40px; 
    margin: 0 50%; 
}

Или вы можете быть более грубой и попробовать это:

.SideBarFirst div { 
    width: 40px; 
    margin-left: 210px; 
}

Эластичная раскладка не будет работать правильно с этим вторым кодом

Или это:

<div class="content">test</div> 
<div class="SideBarFirst"> 
    <div align="center">not working for center</div> 
</div>

Посмотрите это тоже: How to horizontally center a <div> in another <div>?

источник

2013-07-28 12:19:04

Ваша проблема в том, что вы перемещаете элемент влево, чтобы он всегда отображался слева. Если вы тусклый центрировать это изменить CSS к этому:

.content {width:500px; float : left;} 

.SideBarFirst {width:460px; float : right;} 

.SideBarFirst div { 
    width: 40px; 
    margin: 0 auto; 
}

удалить Также это:

body { 
    width: 960px; 
    margin: 0 auto; 
}

источник

2013-07-28 12:26:27 Ollie

Как центрировать элемент внутри div

ответ

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