Центрирование DIV внутри DIV и сделать текст становится меньше на экране пропорционально

Question

Я хочу сосредоточить все DIV так, когда экран становится меньше его оставаться в центре и просто получить меньше

здесь скрипка ссылка: http://jsfiddle.net/h6253/1/

пример кода:

#first_section { 
    width: 0 auto; 
    height: 776px; 
    font-family: 'Raleway', sans-serif; 



} 

#square { 
    width: 857px; 
    height: 4px; 
    background-color: #2a2d2f; 
    margin-bottom: 10px; 
} 

#first_section_txt { 
    position: relative; 
    width: 997px; 
    height: 164px; 
    margin-left: 500px; 
    margin-top: 251px; 
} 

.clear_both { 
    clear: both; 
} 

h1 { font-family: 'Source Code Pro', sans-serif; 
    font-weight: 500; 
    font-size: 111px; 
    display: inline; 
    color: #4a4949; 
    } 
h2 { font-family: 'Source Code Pro', sans-serif; 
    font-weight: 400; 
    font-size: 111px; 
    display: inline; 
    color: #c0c0c0; 
    } 
h3 { font-family: 'Source Code Pro', sans-serif; 
    font-weight: 200; 
    font-size: 25px; 
    display: inline; 
    color: #a7a7a7; 
    padding-left: 350px; 
    top: 15px; 
    } 

    h3{ 
     text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.37); 
    } 
#first_section img { 
    position: relative; 
    margin-left: 525px; 
    width: 466px; 
    height: 540px; 
    margin-top: -150px; 

} 

Answer 1

Если вы хотите отзывчивую страницу, которая изменяет размер в зависимости от размера экрана, вы должны использовать проценты для div элементов и значений эм для текста. Чтобы центрировать div элементов, вы добавляете margin:0 auto;.

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

CLICK HERE FOR DEMO

#first_section{ 
width:100%; 
height:px; 
border:1px solid black; 
margin:0 auto; 
min-width:320px; 
} 
#first_section_txt{ 
width:100%; 
margin:0 auto; 
text-align:center; 
font-size:2em; 
word-wrap:word-break; 
font-family:'Source Code Pro', sans-serif; 
} 
#square{ 
width:95%; 
height:4px; 
border-top:10px solid black; 
margin:0 auto; 
} 
img{ 
margin:0 auto; 

} 

Answer 2

Я не уверен, я понимаю вашу проблему. Пожалуйста, выделите больше проблем в jsFiddle. Может быть, попробовать абсолютное позиционировании:

HTML:

<div class="centered"> 
    <h1>Title 1</h1> 
    <h2>Title 2</h2> 
    <img src="http://placehold.it/250x100" /> 
</div> 

CSS:

.centered { 
    position: absolute; 
    top: 20%; left: 20%; right: 20%; bottom: 20%; 
} 

Убедитесь, что здесь: http://jsfiddle.net/h6253/6/

Answer 3

Убедитесь использовать margin:0 auto; в теле вашего CSS:

корпус { край: 0 авто; }

Это мой fiddle.

Я изменил несколько вещей, например, вместо использования h1, h2 и т. Д., Я изменил его на <span>. Это означает, что текстовые теги могут использоваться для обычного текста и абзацев.

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

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

Answer 4

Вы должны использовать новый трюк я обнаружил здесь больше трюков, ссылки ниже, но перед всеми трюками позволяет взглянуть на эту Demo:http://jsfiddle.net/h6253/9/

Кроме того, чтобы сделать его отзывчивым вам нужно используйте свойство max/min-width.

Код:

div { 
    height: 200px; background-color: rgb(0, 184, 255); color:white; 
    font-family:sans-serif; padding:20px; 
    min-width: 200px; max-width: 400px; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0;  
} 

метод я использовал: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

другие методы ...

http://css-tricks.com/centering-in-the-unknown/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/ (нового в CSS)

http://blog.themeforest.net/tutorials/vertical-centering-with-css/