простой div css центрирующий контент посередине - PullRequest
Новая
       15

простой div css центрирующий контент посередине

0 голосов
/ 13 апреля 2011

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

есть только 2 предмета, в которых мне нужна помощь в размещении.

одно изображение размером 400x200 пикселей, которое мне всегда нужно в центре (как по вертикали, так и по горизонтали), которое будет являться содержимым.и одна строка текста, которую я хочу центрировать внизу, которая будет нижним колонтитулом.

спасибо заранее.

Ответы [ 2 ]

2 голосов
/ 13 апреля 2011

Если я понимаю, о чем вы спрашиваете, я думаю, вы должны попробовать это, используя поля внутри css, это действительно путь.;) 

<html>
    <head>
        <title>Center</title>
            <style type="text/css">
            IMG.image1 {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -200px;
                margin-top: -100px
            }
            #footer {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
            }
        </style>

    </head>
    <body>  
        <div id="Centeredcontent">    
            <img class="image1" width="400px" height="200px"></img>
        </div>
            <div id="footer">Footer</div>
    </body>
</html>

, если у вас общая высота и ширина изображения наполовину и сделать ее отрицательной, то для ширины это будет (margin-left: -200px;), а для top это будет (margin)-право: -100px;)

0 голосов
/ 13 апреля 2011

В CSS нет концепции вертикального центрирования. Это было долгое время. Опции:

  • Вы можете использовать таблицу. Я считаю, что это нормально использовать один для позиционирования.
  • Вы можете использовать JavaScript. Получите высоту окна, сделайте немного математики, затем разместите изображение. Немного грязно. Может быть, больше усилий, чем стоит.
  • Вы можете использовать display: table CSS. Увы, не работает в IE AFAIK.
  • Вы могли бы просто подделать это. Дайте изображению верхнее поле 150px и все будет в порядке, а нижнее пространство будет переменным. Это маршрут, по которому я бы пошел. Прагматичный дизайн. ;)
...