1
Ich weiß mit margin: 0 auto zentriert die div. Aber in meinem Fall funktioniert es nicht. Und ich bin nicht in der Lage, mein Problem herauszufinden. Wenn jemand mich in die richtige Richtung führen könnte, wird es sehr hilfreich sein.Center ein html div
Unten ist die html
ich der Kreis div und Image-Tag wollen in der Mitte des Segments always.it zu sein, ist horizontal in der Mitte, aber nicht vertikal seine Aufenthalte an der Spitze des Segments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Shruti Nair:Freelancers</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top menu">
<div class="container menu">
<a class="navbar-brand menuButton" href="#">ABOUT</a>
<a class="navbar-brand menuButton" href="#">SKILLS</a>
<a class="navbar-brand menuButton" href="#">PORTFOLIO</a>
<a class="navbar-brand menuButton" href="#">EXPERIENCE</a>
</div>
</nav>
<div class="content-box content">
<section style="background-color:#90ECF2;min-height:500px;margin:0 auto;text-align:center;">
<div>
<div class="circletag" id="nay">
<img src="img/defaultAvatars.png">
</div>
<h1 class="heading">SHRUTI NAIR</h1>
<span>Hybrid Mobile App developer</span>
</div>
</section>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Unten finden Sie die CSS
.menu{
background-color: white;
}
.menuButton{
color: black !important;
width: 25%;
text-align: center;
font-size:14px;
}
.content{
margin-top:50px;
}
.heading{
color:white;
}
.circletag {
display: block;
width: 100px;
height: 100px;
background: #E6E7ED;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
text-align:center;
margin: 0 auto;
}
.circletag img{
margin-top:7px;
width:100px;
}