разместить веб-страницу в центре для всех размеров экрана

Question

разместить веб-страницу в центре для всех размеров экрана

0

Я использую HTML и CSS. Я не могу отображать весь контент в середине экрана для разных размеров дисплея. Я попытался использовать% вместо PX, но он не подходит для небольшого размера экрана, такого как 800 * 600 пикселей. Кроме того, я выполнил поиск в Интернете, но мой недостаток глубоких знаний о HTML препятствует моему прогрессу. мой код:

<style type="text/css">
#Line5
{
   color: #7B7BC0;
   background-color: #7B7BC0;
   border-width: 0px;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #8B8B00 solid;
   padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>

может кто-то исправить этот кусок кода для меня?

Mc Donald 04 янв. 2014, в 08:55

Источник

0

Это полное содержимое файла?
norlesh 04 янв. 2014, в 07:12
0

Нет, это не полный код, вышеупомянутый фрагмент кода не написан мной и автоматически создан программой для веб-мастеров WYSIWYG.
Mc Donald 04 янв. 2014, в 07:22
0

В этом случае я бы отказался от использования WYSIWYG и начал заново с jsFiddle @Anup, включенного в его ответ.
norlesh 04 янв. 2014, в 07:28

Показать ещё 1 комментарий

Теги:

html

css

screen

size

5 ответов

Ещё вопросы

Нет, это не полный код, вышеупомянутый фрагмент кода не написан мной и автоматически создан программой для веб-мастеров WYSIWYG.
В этом случае я бы отказался от использования WYSIWYG и начал заново с jsFiddle @Anup, включенного в его ответ.

Anup · Answer 1 · 2014-01-04T05-26-00.000Z

Не знаю, каков ваш желаемый результат. Но проверьте это.

Нажмите здесь для демонстрации

<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>

Mc Donald · Answer 2 · 2014-01-06T04-46-00.000Z

Я благодарю всех тех, кто помог мне. Проблема была решена путем добавления следующего кода.

    <style type="text/css">
    div#container
    {
       width: 990px;
       position: relative;
       margin-top: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
    }
    ....
    .....
    ........
    <body>
    <div id="container">
    ...
    ....

Огромное вам спасибо за помощь новобранец!

Richard Shi · Answer 3 · 2014-01-04T05-15-00.000Z

Также не совсем уверен, что вы просите. Я интерпретирую его так, как вы хотите, чтобы div был центрирован вертикально и горизонтально, так что я собираюсь.

HTML

<div id="wb_Text1">
    <b>SAMPLE TEXT</b>
</div>

CSS

body {
    height: 100%; 
    width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
    height: 93px; //or whatever height you want
    width: 300px; //or whatever width you want (can be in %)
    background-color: #7B7BC0;
    border: 0px;
    padding: 0px;
    font: 32px Arial;
    line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
    color: #fff;
    text-align:center;
    margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
    margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}

Вот что происходит внутри calc():

50% дает вам половину общей высоты страницы,

46.5px - половина высоты div, которая в этом случае равна 93,

50% - 46.5px дает вам пространство, необходимое для 50% - 46.5px div по вертикали

Сценарий здесь: http://jsfiddle.net/Shiazure/hA9KB/

спасибо дорогой друг, я приложил свой полный код в предыдущем посте. Можете ли вы сказать мне, какие изменения должны быть сделаны для приведенного выше кода и где я должен поместить ваш модифицированный код. Еще раз спасибо за вашу помощь
Код WYSIWYG в лучшем случае запутанный. Я предполагаю, что вы просто хотите текст с твердым фоном, который имеет фиксированную ширину и высоту, поэтому HTML и CSS, которые я вам дал, это все, что вам нужно. Удалите все, что дал вам редактор, и все будет хорошо. Я проанализировал мой код, чтобы вы могли понять, что происходит.

Pramod Pandey · Answer 4 · 2014-01-04T05-06-00.000Z

Здесь обновленный код и его работа отлично.

<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>

Sam · Answer 5 · 2014-01-04T04-31-00.000Z

Не ясно о вашем вопросе, но я думаю, что любой из приведенных ниже примеров может сработать для вас; если вы хотите, чтобы это соответствовало стандартам, используйте это в своей таблице стилей:

body { 
text-align:center; 
} 
#mainContainer { 
margin:0 auto; 
}

тело делает работу в IE, margin:0 auto; делает его центром в большинстве других браузеров.

вам может потребоваться войти и сбросить некоторые из ваших основных контейнеров в text-align:left; потому что body text-align:center иногда каскадирует в контент сайта, но вы можете противодействовать этому, добавляя

text-align:left; 
to #mainContainer

Или, могут быть лучшие методы, но это работает во всех браузерах:

body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

или установите ширину тела до 100%, а затем просто создайте контейнерный div для вашей страницы

#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}