Столичное центрирование (вертикальное)

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

Вы, ребята, знаете решение этой проблемы? Вот мой код:

HMTL:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>B-Music: Piano</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" type="text/css" href="piano.css"> 
    </head> 
    <body> 
     <div id="tablecontainer"> 
      <div id="tablerow"> 
       <div id="Column1"> 
       <div id="pianoleerkracht"> 
        <a href="Prijs&Contact.html" title="Pianoleerkracht"> 
         <img src="img/piano.jpg" alt="Pianoleerkracht"> 
        </a> 
       </div> 

       <div id="jezelf"> 
         <a href="Prijs&Contact.html" title="Jezelf"> 
         <img src="img/piano.jpg" alt="Jezelf"> 
         </a> 
       </div> 
      </div> 

      <div id="column2">  
       <div id="mij"> 
        <a href="Prijs&Contact.html" title="Mij"> 
         <img src="img/piano.jpg" alt="Mij"> 
        </a> 
       </div> 
       <div id="prijs&Contact"> 
        <a href="Prijs&Contact.html" title="Prijs en Contact"> 
         <img src="img/piano.jpg" alt="Prijs en Contact"> 
        </a> 
       </div> 
      </div> 
      </div> 
     </div> 

    </body> 
</html>

И CSS:

body{ 
    background-color: brown; 
    height: 100%; 
} 

#tablecontainer{ 
    display: table; 
    border-spacing: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
} 

#tablerow{ 
    display: table-row; 
    height: 100% 
} 

#column1{ 
    display: table-cell; 
    vertical-align: bottom; 
} 
#column2{ 
    display: table-cell; 
} 

img{ 
    width: 100px; 
    height: 100px; 
}

С наилучшими пожеланиями

источник

2014-02-07 Barrie

Кажется, как будто сама tablecontainer идет по центру, однако содержание в пределах контейнер остался нетронутым этим css. Возможно, если вы добавите центрирующие элементы в div tablerow, это исправит проблему.

Вот что я хотел бы попробовать:

#tablerow{ 
    display: table-row; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
}

источник

2014-02-07 22:32:31

Хм, нет. На самом деле этого вообще не было. – Barrie

вам не нужны таблицы. CSS достаточно:

#pianoleerkracht { 
    position: absolute; 
    left: 25%; 
    top: 25%; 
    margin-left: -50px; 
    margin-top: -50px; 
}

я создал jsfiddle для вас: http://jsfiddle.net/tomaspolach/Q89f3/

источник

2014-02-07 22:36:03

Это очень похоже на то, чего я хочу достичь. Но я хочу, чтобы ссылки стояли вместе, как на этом изображении: http://postimg.org/image/hfkrch00d/ То, как вы хотите это сделать, кажется довольно утомительным для достижения этого. Мне также интересно, почему мой способ не работает. У вас есть объяснение? – Barrie

Решение: Я нашел решение этой проблемы. Вот код:

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     B-Music: Piano 
    </title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" href="piano.css"> 
    </head> 
    <body> 
    <div id="Outer"> 
     <div id="Middle1"> 
     <div id="Inner1"> 
      <div id="pianoleerkracht"> 
      <a href="PrijsEnContact.html" title= 
      "Pianoleerkracht"><img src="img/piano.jpg" alt= 
      "Pianoleerkracht"></a> 
      </div> 
      <div id="jezelf"> 
      <a href="PrijsEnContact.html" title="Jezelf"><img src= 
      "img/piano.jpg" alt="Jezelf"></a> 
      </div> 
     </div> 
     </div> 
     <div id="Middle2"> 
     <div id="Inner2"> 
      <div id="mij"> 
      <a href="PrijsEnContact.html" title="Mij"><img src= 
      "img/piano.jpg" alt="Mij"></a> 
      </div> 
      <div id="prijsEnContact"> 
      <a href="PrijsEnContact.html" title= 
      "Prijs en Contact"><img src="img/piano.jpg" alt= 
      "Prijs en Contact"></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

И CSS конечно:

body{ 
    background-color: brown; 
    height: 100%; 
} 

#Tablecontainer{ 
    display: table; 
    border-spacing: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
} 

#tablerow{ 
    display: table-row; 
    height: 100% 
} 

#column1{ 
    display: table-cell; 
    vertical-align: middle; 

} 
#column2{ 
    display: table-cell; 
} 

img{ 
    width: 100px; 
    height: 100px; 
} 
#Outer{ 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

#Middle1{ 
    display: table-cell; 
    vertical-align: middle; 
} 

#Middle2{ 
    display: table-cell; 
    vertical-align: middle; 
} 

#Inner1{ 
    float: right; 
    width: 120px; 
} 

#inner2{ 
    float: left; 
    width: 120px; 
}

Спасибо вам, ребята, за вдохновение!

источник

2014-02-08 12:59:17 Barrie

Столичное центрирование (вертикальное)

ответ

Смежные вопросы