значения свойства:
* {
margin
:
0
;
padding
}
.main {
height
600px
width
900px
position
absolute
top
50%
left
margin-top
-300px
margin-left
-450px
.wrapper {
100%
33.3%
float
#div
1
, #div
2
3
{
150px
800px
relative
-75px
-400px
border
1px
solid
p {
text-align
center
line-height
font-size
24px
p:before {
content
"english - "
p:after {
" - translate - Привет Мир!"
" - translate - Быть или не быть?"
"russian - "
" - translate - To be or not to be?"
* { margin: 0; padding: 0; } .main { height: 600px; width: 900px; position: absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -450px; } .wrapper { width: 100%; height: 33.3%; float: left; } #div1, #div2, #div3 { height: 150px; width: 800px; float: left; position: relative; top: 50%; left: 50%; margin-top: -75px; margin-left: -400px; border: 1px solid; } #div1, #div2, #div3 p { text-align: center; line-height: 150px; font-size: 24px; } #div1 p:before { content: "english - "; } #div1 p:after { content: " - translate - Привет Мир!"; } #div2 p:before { content: "english - "; } #div2 p:after { content: " - translate - Быть или не быть?"; } #div3 p:before { content: "russian - "; } #div3 p:after { content: " - translate - To be or not to be?"; }
<!DOCTYPE html>
<
html
>
head
meta
charset
=
"utf-8"
/>
title
>New Page</
link
href
"css/style.css"
rel
"stylesheet"
</
body
div
class
"main"
"wrapper"
id
"div1"
p
>Hello World!</
"div2"
>To be or not to be?</
"div3"
>Привет Мир!</