amélioration centrage

master
iGor 2015-04-26 08:30:15 +02:00
parent 41ae506372
commit fe2a85d0a2
No known key found for this signature in database
GPG Key ID: 3E9D7C1605E40FCD
2 changed files with 115 additions and 19 deletions

View File

@ -1,22 +1,42 @@
#accueil {
margin-top: 1%;
}
button, .button { button, .button {
height: 225px; height: 205px;
width: 225px; width: 205px;
overflow: hidden; overflow: hidden;
word-wrap: break-word;
white-space: normal; white-space: normal;
margin: 6px; margin: 15px;
hyphens: auto; hyphens: auto;
-moz-hyphens: auto; -moz-hyphens: auto;
} }
.content .text {
box-sizing: border-box;
}
.content { .content {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
height: 220px; height: 200px;
} }
.text { .text {
min-width: 144px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/* @media (max-width: 1100px) {
button, .buttons {
height: 180px;
width: 180px;
}
.content {
height: 175px;
}
.text {
min-width; 140px;
}
} */

View File

@ -21,7 +21,6 @@
<nav id="accueil" class="container"> <nav id="accueil" class="container">
<div class="row">
<div class="button"> <div class="button">
<div class="content"> <div class="content">
@ -55,25 +54,102 @@
</div> </div>
</div> </div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 05</a>
</div>
</div>
</div> </div>
<div class="row"> <div class="button">
<div class="content">
<a href="#" title="" class="button three.columns">entrée 05</a> <div class="text">
<a href="#" title="" class="button three.columns">entrée 06</a> <a href="#" title="">entrée 06</a>
<a href="#" title="" class="button three.columns">entrée 07</a> </div>
<a href="#" title="" class="button three.columns">entrée 08</a> </div>
</div> </div>
<div class="row"> <div class="button">
<div class="content">
<a href="#" title="" class="button three.columns">entrée 09</a> <div class="text">
<a href="#" title="" class="button three.columns">entrée 10</a> <a href="#" title="">entrée 07</a>
<a href="#" title="" class="button three.columns">entrée 11</a>
<a href="#" title="" class="button three.columns">entrée 12</a>
</div> </div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 08</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 09</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 10</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 11</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 12</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 13</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 14</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 15</a>
</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="text">
<a href="#" title="">entrée 16</a>
</div>
</div>
</div>
</nav> </nav>