HTML и CSS - центрирование div независимо от размера браузера - PullRequest
Новая
       0

HTML и CSS - центрирование div независимо от размера браузера

2 голосов
/ 17 февраля 2012

Почему то, что мне кажется самым простым заданием для меня, всегда вызывает наибольшее недоумение ... Это в названии ... но я играл за йонков, но не могу заставить его работать на меня!

По существу (просто чтобы сделать его еще более понятным, я надеюсь получить следующее) (изображение - это фон div).

enter image description here

поэтому, независимо от размера окна браузера, div всегда централизован!

Спасибо за любой совет, который вы можете дать ... [=

edit: По сути, я пытаюсь добиться мошенничества с использованием всплывающего окна для регистрационной формы.

так что на данный момент вся страница состоит из следующего: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>BlurbeRella - Registeration</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <div id="registerpage">
  <img src="images/registerpage.png" class="registerpage" />
 </div>
</html>

CSS: 

img.registerpage{ 
 text-align: center;
 top: 100%;
}

#registerpage{
 text-align: center;
 width: 100%;
}

CSS - моя слабая попытка сохранить его в центре .....

в основном: сайт на данный момент (пока без функциональности) - blurberella.x10.mx

когда пользователь нажимает на регистр, у меня будет фоновое изображение самого сайта, так что похоже, что вы все еще на той же странице ... тогда в середине у меня будет моя форма ... но чтобы убедиться, что изображение сайта по-прежнему выглядит как веб-сайт Мне нужно, чтобы он оставался центральным независимо от размера браузера!

Надеюсь, это имеет смысл ... Я не знаю, что я обманываю в этом, но с моими нынешними знаниями это лучшее, что я могу сделать .... Я все еще учусь!

Ответы [ 5 ]

2 голосов
/ 17 февраля 2012

Возможно, я где-то неправильно понял вопрос, но из моего понимания вы ищете что-то вроде this .

HTML: 

<body>
<div id="imgholder"></div>
</body>

CSS: 

html, body {
    height: 100%;
}

#imgholder {
    height: 100%;
    background: url(image.png) center center no-repeat;
}​
1 голос
/ 17 февраля 2012

Не уверен, что это работает на всех браузерах, но должно работать на более новых.

CSS: 

.container {
position: fixed;
height: 100%;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical
}

.content {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1
}

HTML: 

<div class="container">
<div class="content">
Stuff to be Centered
</div>
</div>
1 голос
/ 17 февраля 2012

Я только что сделал это для другой темы CSS. Смотрите, если это то, что вы ищете.

1 голос
/ 17 февраля 2012

Редактировать На основании вашей дополнительной информации, http://jsfiddle.net/EJM9J/ - это то, что вы хотите.Просто div, как и любой другой, только по центру на странице.Вы можете дать ему фоновое изображение, если хотите.

Вам понадобится Javascript, хотя.

0 голосов
/ 17 февраля 2012

Хотя есть некоторые отклики, которые сработали "Спасибо всем"

Я сортировал это с этим

фон привязанности: фиксированный; фон положение: центр;

Спасибо всем ....

Прошу прощения за плохо объясненный вопрос

...