Witam wszystkich,
Podczas nauki z poradnika Pana Mirosława dokładniej mowa o odcinku: "Kurs HTML odc.3"
W 41:08 by wyśrodkować ikonkę YT w pionie zostało wpisane
{
front-size: 76px;
margin-top: 30px;
}
i powiedzmy, że logo ułożyło się w pionie. Ja chciałem rozwiązać to inaczej, a mianowicie by obiekt ułożył się samoczynnie idealnie na środku i po kilku godzinach znalazłem kilka rozwiązań tego problemu, poniżej jedno z nich:
<style>
#container
{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#tile5
{
width: 480px;
height: 304px;
background-color: #666666;
text-align: center;
}
#tile5:hover
{
background-color: red;
}
#no-results
{
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
}
.linkyoutube
{
color: #ffffff;
text-decoration: none;
display: block;
width: 480px;
height: 304px;
<!--alternatywa próbowałem jeszcze-->
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
}
<!--ale to też nie pomaga, bo również nie jest idealnie na środku-->
</style>
</head>
<body>
<div id="container">
<div id="tile5">
<div id="no-results">
<a href="youtube" class="linkyoutube"> <i class="icon-youtube"></i>
</div>
</div>
</div>
</body>
Tutaj mam problem taki, że jeśli wpisze wymiary .linkyoutube to burzy mi to co do tej pory zrobiłem (przyciąga mi logo do góry diva), a ja chce uzyskać coś takiego (całe tło szare wraz z logiem ma być odnośnikiem):
a ten kod wyżej robi mi:
w innych sposobach również psuje się wyśrodkowanie po dodaniu linka.
Teraz pytanie do Was czy dać sobie spokój z takim linkowaniem i linkować specjalnie całego diva czy dalej głowić się jak to rozwiązać by działało?
Będę bardzo wdzięczny jeśli ktoś mi wyjaśni zasadę działania, bo wolałbym to zrozumieć niż tylko wiedzieć, że mam robić innym sposobem. A z tego co już zauważyłem, linkowanie i środkowanie elementu w divie to bardzo ważna część budowy strony www.