/ / По-добър начин за центриране от дисплея: flex? - html, css, css3, flexbox

По-добър начин да центрирате дисплея: flex? - html, css, css3, flexbox

Беше ми обърнато внимание, каквото съмцентрирането на нещата в моя сайт не е най-добрият начин, тъй като не е наистина центриран. Играх с това в продължение на няколко часа и самият не намерих по-добър начин.

Имам кодовата си писалка тук и се чудеше дали някой може да ме насочи в правилната посока.

section#projects > div.row > div.wrapper > img {
height: 356px;
width: 390px;
}
h1 {
font-size: 70px;
word-spacing: 1px;
line-height: 90px;
letter-spacing: -3px;
}
.social-links span {
text-align: center;
width: 10vw;
height: 10vw;
border-radius: 100%;
margin-right: 4em;
/*space between*/
display: flex;
align-items: flex-start;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background-color: #c5c5c5;
}
.social-links span i {
font-size: 50px;
align-self: center;
color: #fff;
transition: all 0.4s;
-webkit-transition: all 0.4s;
margin: 0 auto;
}
.social-links span i::before {
display: inline-block;
text-decoration: none;
}
.social-links span:hover {
background: rgba(0, 0, 0, 0.1);
}
.social-links span:hover i {
color: #909090;
}
#contactMe {
margin: 10vh auto;
text-align: center;
}
.social-links {
display: inline-block;
margin-left: 7.9vw;
}
section#contact > div.row > div.col-md-12 > h2 {
margin-top: 10vh;
}
section#contact > div.row > div.col-md-12 > h1 {
margin-top: 11vh;
}
.social-links > div {
text-align: center;
margin: 0 auto;
/*space between*/
display: inline-block;
float: left;
}
.social-links div h4 {
color: coral;
margin-left: -55px;
}
<section id="contact">
<hr>
<div class="row">
<div class="col-md-12">

<div id="contactMe">
<div class="social-links text-center">
<div class="mail">
<a class="nostyle" href="mailto:email@mail.com">
<span><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></span>
<h4>Email</h4>
</a>
</div>
<div class="phone">
<span><i class="fa fa-mobile fa-2x" aria-hidden="true"></i></span>
<h4 class="text-center">phone</h4>
</div>
<div class="skype">
<a class="nostyle" href="skype:kyle.c.r.fahey?call">
<span><i class="fa fa-skype fa-2x" aria-hidden="true"></i></span>
<h4>skype</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</section>

Благодаря!

Отговори:

2 за отговор № 1

Всичко зависи от това какъв вид оформление правите. В този случай е много лесно да се поставят елементи в средата. Можеш да използваш: margin: 0 auto;:

section#projects > div.row > div.wrapper > img {
height: 356px;
width: 390px;
}
h1 {
font-size: 70px;
word-spacing: 1px;
line-height: 90px;
letter-spacing: -3px;
}
.social-links span {
text-align: center;
width: 10vw;
height: 10vw;
border-radius: 100%;
margin: 0 auto;
/*space between*/
display: inline-block;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background-color: #c5c5c5;
}
.social-links span i {
font-size: 50px;
align-self: center;
color: #fff;
transition: all 0.4s;
-webkit-transition: all 0.4s;
margin: 0 auto;
}
.social-links span i::before {
display: inline-block;
text-decoration: none;
}
.social-links span:hover {
background: rgba(0, 0, 0, 0.1);
}
.social-links span:hover i {
color: #909090;
}
#contactMe {
margin: 10vh auto;
text-align: center;
}
.social-links {
display: inline-block;
}
section#contact > div.row > div.col-md-12 > h2 {
margin-top: 10vh;
}
section#contact > div.row > div.col-md-12 > h1 {
margin-top: 11vh;
}
.social-links > div {
text-align: center;
margin: 0 auto;
/*space between*/
display: inline-block;
float: left;
width: 100px;
}
.social-links div h4 {
color: coral;
}
<section id="contact">
<hr>
<div class="row">
<div class="col-md-12">

<div id="contactMe">
<div class="social-links text-center">
<div class="mail">
<a class="nostyle" href="mailto:email@mail.com">
<span><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></span>
<h4>Email</h4>
</a>
</div>
<div class="phone">
<span><i class="fa fa-mobile fa-2x" aria-hidden="true"></i></span>
<h4 class="text-center">phone</h4>
</div>
<div class="skype">
<a class="nostyle" href="skype:kyle.c.r.fahey?call">
<span><i class="fa fa-skype fa-2x" aria-hidden="true"></i></span>
<h4>skype</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</section>


1 за отговор № 2

Добавете следващите css. Това са css3 flexbox свойства за изравняване на елементите в центъра.

.social-links {
justify-content: center;
display: flex;
}

Забележка: Премахнах margin от някои елементи във вашия стил. Имотът беше напълно излишен.</ EM>

section#projects > div.row > div.wrapper > img {
height: 356px;
width: 390px;
}

h1 {
font-size: 70px;
word-spacing: 1px;
line-height: 90px;
letter-spacing: -3px;
}

.social-links span{
text-align:center;
width: 10vw;
height: 10vw;
border-radius: 100%;
display: flex;
align-items: flex-start;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background-color: #c5c5c5;
}
.social-links span i{
font-size: 50px;
align-self:center;
color: #fff;
transition: all 0.4s;
-webkit-transition: all 0.4s;
margin: 0 auto;
}
.social-links span i::before{
display:inline-block;
text-decoration:none;
}
.social-links span:hover{
background: rgba(0,0,0,0.1);
}
.social-links span:hover i{
color:#909090;
}

#contactMe {
margin: 10vh auto;
text-align: center;
}

.social-links {
justify-content: center;
display: flex;
}

section#contact > div.row > div.col-md-12 > h2 {
margin-top: 10vh;
}

section#contact > div.row > div.col-md-12 > h1 {
margin-top: 11vh;
}

.social-links > div {
text-align: center;
margin: 0 4em; /*space between*/
}

.social-links div h4 {
color: coral;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact" class="container">
<hr>
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Contact Me</h1>
<h2 class="text-center">Let"s get the ball rolling.</h2>
<div id="contactMe">
<div class="social-links text-center">
<div class="mail">
<a class="nostyle" href="mailto:email@mail.com">
<span><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></span>
<h4>Email</h4>
</a>
</div>
<div class="phone">
<span><i class="fa fa-mobile fa-2x" aria-hidden="true"></i></span>
<h4 class="text-center">phone</h4>
</div>
<div class="skype">
<a class="nostyle" href="skype:kyle.c.r.fahey?call">
<span><i class="fa fa-skype fa-2x" aria-hidden="true"></i></span>
<h4>skype</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</section>


Свързани въпроси


Коментари (0)

Добави коментар