Guten Abend Zusammen,
ich bin neu in der HTML & CSS Welt und habe eine anfänger Frage. Ich habe meine Seite so gut wie fertiggestellt und bin jetzt dabei das Responsive-Design umzustellen.
Und zwar geht es darum das ich auf meiner Seite ein div Container habe in dem Links mit Logos daneben stehen. Ich würde gerne sowohl die Links als auch die Logos zentrieren. Mit text-align:center; werden allerdings nur die Links zentriert und die Logos bleiben links am Rand stehen. Ich hoffe ich konnte mich verständlich ausdrücken.
Bitte nicht zu hart mit mir sein, es ist mein erstes Projekt 
Code
[U][B]HTML Code:[/B][/U]
<div class="container1">
<div class="container2">
<div class="row">
<div class="three columns">
<a class="links" href="....">
<div class="logo1"><i class="...."></i></div>
<div class="text1"><p>Text</p></div>
</a>
</div>
<div class="three columns">
<a class="links" href="....">
<div class="logo2"><i class="..."></i></div>
<div class="text2"><p>Text</p></div>
</a>
</div>
<div class="three columns">
<a class="links" href="....">
<div class="logo3"><i class="...."></i></div>
<div class="text3"><p>Text</p></div>
</a>
</div>
<div class="three columns">
<a class="links" href="....">
<div class="logo4"><i class="....."></i></div>
<div class="text4"><p>Text</p></div>
</a>
</div>
</div>
</div>
</div>
[U][B]CSS Code:[/B][/U]
.text2,
.text3 {
font-size:120%;
margin-left:35px;
margin-top:5px;
@media (min-width:1085px) {
font-size:150%;
margin-left:35px;
margin-top:5px;
}
}
.text4 {
font-size:120%;
margin-left:35px;
margin-top:5px;
@media (min-width:1085px) {
font-size:150%;
margin-left:5px;
margin-top:5px;
}
}
.text1 {
font-size:120%;
margin-left:20px;
margin-top:5px;
@media (min-width:1085px) {
font-size:150%;
margin-left:120px;
margin-top:5px;
}
}
.logo2,
.logo3 {
float:left;
font-size:150%;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
@media (min-width:1085px) {
float:left;
font-size:200%;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
}
}
.logo4 {
float:left;
font-size:150%;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
margin-right:10px;
margin-left:20px;
@media (min-width:1085px) {
float:left;
font-size:200%;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
margin-right:10px;
margin-left:20px;
}
}
.logo1 {
float:left;
font-size:150%;
margin-left:0px;
margin-bottom:0px;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
@media (min-width:1085px) {
float:left;
font-size:200%;
margin-left:100px;
margin-bottom:50px;
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
}
}
.logo1:hover,
.logo2:hover,
.logo3:hover,
.logo4:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.links {
text-decoration:none;
color:$white;
}
.links:hover {
text-decoration:underline;
color:$white;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}Vielen Dank schon mal.