Как центр div И место внизу другого div

На всех постах мне удалось найти сделку либо с центрированием div внутри другого div, либо с установкой div в нижней части другого div, и совет было здорово, но я не смог найти что-либо, чтобы сделать то и другое.Как центр div И место внизу другого div

Мой код:

<body style="text-align:center; margin:0; padding:0;"> 
    <div style="width:100%; height:100px; background-image:url(header.png);position:relative;"> 
    <div> 
     <div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;"> 
     <div style="float:left; position:relative; left:30px; top:15px"> 
      <img src="logo.png" width="88" height="38"> 
     </div> 
     <div style="margin-top:15px"> 
      <h1>Product Form</h1> 
     </div> 
    </div> 
    </div> 
</div> 
</body>

Все, что я хочу сделать, это поставить formtop.png DIV в нижней части и в центре содержащих дел. Я могу сделать то или другое, но я не могу сделать то и другое. Если я изменю position:absolute на position:relative, тогда изображение центрирует себя, но слишком высоко. Когда я меняю его на абсолютный, он сидит в нижней части своего содержащего div, но в IE он идет вправо, а в firefox - в левой части страницы.

Любые советы?

источник

2011-12-22 Dev Newb

Не могли бы вы исправить свой HTML-код? В настоящее время он искажен, и трудно однозначно выяснить, как это должно быть. – Jacob

Кроме того, было бы намного проще разобрать, если вы разместили свой CSS как отдельную таблицу стилей вместо использования встроенных стилей. – Jacob

Вы можете сделать это, установив formtop.png <div> на 100% ширину и центрирование фонового изображения с помощью CSS:

<!-- div with the formtop.png background --> 
<div style=" 
    height:75px; 
    width:100%; 
    background:url(formtop.png) no-repeat 50% 0; 
    bottom:0; 
    position: absolute;">

Как и в стороне, если переместить все встроенные стили в CSS-файл , ваш код будет намного проще работать и поддерживать:

<div class="formTop"> 

.formTop {  
    position: absolute; 
    bottom: 0; 
    left: 0;  

    height: 75px; 
    width: 100%; 

    /* Set the background image to centered in this element */ 
    background: url(formtop.png) no-repeat 50% 0;  
}

источник

2011-12-22 19:14:10 Pat

Большое вам спасибо. Это было именно то, что мне нужно. Выглядит отлично в IE и Firefox. Еще раз спасибо! –

вы пробовали left:0; right:0; трюк для абсолютно позиционируемых элементов? Он не работает для IE7 и IE6, но он подходит для остальных браузеров и более поздних версий.

Это пример http://jsfiddle.net/6w6VR/

источник

2011-12-22 19:24:30

Привет, славный метод ...! Я до сих пор не понимаю, что у него есть, но это круто. Могу ли я спросить вас, как позиция может повлиять на поведение полей? – Michele

Если вы хотите центрировать div и * переместить его * из центра, вы не сможете использовать этот трюк, потому что вы вынуждены использовать 'margin-right' и' margin-left' как 'auto'. Но вы все еще можете вложить «div» внутрь и играть с его маржой, положением и т. Д. ... –

Старайтесь избегать HTML элементы, которые используются только для стиля, потому что вы можете захотеть изменить свой стиль позже.

See this example, который использует :after pseudoclass:

div { 
    width:100%; 
    position: relative; 
    background-image: url(header.png); 
} 

div:after { 
    display: block; 
    position: absolute; 
    z-index: -1; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    width: 100%; 
    height: 20px; 
    background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png); 
    background-repeat: no-repeat; 
    background-position: center 0px; 
}

Вы можете установить свой header.png в качестве фона для div.

источник

2011-12-22 19:49:03 Yogu

Как центр div И место внизу другого div

ответ

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