I have this html markup, I would like to center horizontally an icon I have in a sprite, it have 15 % for the icon anc 85% for the info-data class. I would like to align center the icon.
<div class="col-xs-12 mf-item">
<div class="ico icon-theme"></div>
<div class="info-data">Theme</div>
</div>
.mf-item {
background-color: #ffffff;
display: inline-block;
height: auto;
margin-left: 0;
min-height: 30px;
}
.ico {
display: inline-block;
line-height: 30px;
margin: 0 auto;
padding-right: 5px;
text-align: center;
vertical-align: middle;
width: 15%;
}
.info-data {
border-bottom: 1px solid #0f8ccd;
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
}
.icon-theme {
background-position: 0 -90px;
height: 30px;
width: 23px;
}
Any help will be appreciate it!!!!
Thanks!
Your are missing your float:left styling. I would do it something like this
* {
box-sizing: border-box;
}
.mf-item {
background-color: #ffffff;
display: inline-block;
height: auto;
margin-left: 0;
min-height: 30px;
width:100%;
}
.ico {
display: inline-block;
height: 30px;
margin: 0 auto;
padding-right: 5px;
text-align: center;
vertical-align: middle;
width: 15%;
float:left;
}
.info-data {
border-bottom: 1px solid #0f8ccd;
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
float:left;
}
.icon-theme {
background-position: 0 -90px;
height: 30px;
width: 23px;
display:block;
margin:0 auto;
background-color:red; //your background image imaging
}
<div class="col-xs-12 mf-item">
<div class="ico"><span class="icon-theme"></span></div>
<div class="info-data">Theme</div>
</div>
Try
vertical-align: middle;
that usually does the trick!
Related
In This Code,I want to set the margin-top of .Login class ,smaller,although I set The margin-top ,to zero,but it is not set near to the top of page.What Can I do?why by setting the margin-top of this division ,this div does not set ,near the top of page?is other thing ok?the other elements works properly.
body {
margin: 0px;
direction: rtl;
}
#font-face {
src: url('../fonts/IRANSansWeb.eot'), url('../fonts/IRANSansWeb.woff'), url('../fonts/IRANSansWeb.woff2'), url('../fonts/IRANSansWeb.ttf');
font-family: "IranSans";
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 60px;
margin: 0px auto;
border: 2px solid black;
display: inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-bottom: 0px;
display: inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}
.LogIn {
width: 140px;
height: 50px;
display: inline-block;
margin-right: 130px;
margin-top: 0px;
font-family: "IranSans";
border-radius: 5px;
background-color: #00d363;
}
.LogInA {
width: 100%;
height: 100%;
border: 5px;
color: #fff;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 50px;
}
.LogInA:hover {
border-radius: 5px;
background-color: #007bff;
color: #00d363;
border: 1px solid #00d363;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul>
</ul>
<div class="LogIn">
<a class="LogInA" href="#">ارسال شغل</a>
</div>
</nav>
</header>
</body>
Try adding display: flex; to your nav
You should use:
display:flex; justify-content: center; to your Nav and also you should remove height and use: flex-direction:column; in mobile version.
My problem is with the CSS: I want to center the #product-section, while the .product-img should all be aligned as they are currently. To clarify: I want all products to be centered, but lined up as they currently are.
The parent div (which I want to be centered):
#product-section {
margin: 0;
padding: 0;
padding-left: 15px;
display: inline-block;
margin: 0 auto;
display: inline-block;
background-color: red;
}
The products (which should be lined up as in the picture):
.product-img {
width: 220px;
height: 220px;
border: 2px solid #F3F3F3;
display: inline-block;
margin: 30px 15px 0 0;
vertical-align: top;
}
.product-img img {
display: block;
margin: 0 auto 0 auto;
height: 150px;
width: 80%;
}
.product-img h3 {
height: 50px;
width: 100%;
line-height: 50px;
font-size: 36px;
margin: 20px 0 0 0;
background-color: #F3F3F3;
text-align: center;
font-family: 'Roboto';
color: #6C6C6C;
}
The Header Text
.category {
font-size: 64px;
font-family: 'Open Sans';
width: 100%;
text-align: center;
margin: 50px auto 0 auto;
display: inline-block;
}
HTML
<div id="product-section">
<h2 class="category">Mejeri</h2>
<div id="Mjölk" class="product-img product added"><h4><span>6</span> st</h4><img src="assets/icons/milk.png"><h3>Mjölk</h3></div>
</div>
So this is my code:
.hej {
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
}
.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;
}
.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
background: white;
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;
}
.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: 0 0 0 -15vw;
width: 15vw;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
<div class="circlem">
<p>
How Rules
</p>
</div>
</div>
And i don't know why, but bigger font-size cause text move to the right side :_:
What i should change in my code? Im using bootstrap to make navbar.
I didn't edit body section.
On the image you can see, how it moved to the right side
Here is link to the codepen.io: http://codepen.io/anon/pen/gPByPx
I have cleaned and merged your css code a bit:
.hej
{
width:100%;
height:1000px;
background-color:yellow;
text-align:center;
}
.circlem{
display: inline-block;
border-radius: 50%;
margin: 15px auto;
background: white;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;
min-width: 15%;
white-space: nowrap;
}
.circlem p {
position:relative;
font-size: 3.5vw;
margin: 0;
padding: 0;
line-height: 30vw;
white-space: normal;
width: 30vw;
height: 30vw;
}
<div class="hej">
<div class="circlem">
<p>
How Rules
</p>
</div>
</div>
simply add transform: translateX(-50%) to your paragraph.
.hej {
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
}
.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;
}
.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
background: white;
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;
}
.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: 0 0 0 -15vw;
width: 15vw;
transform: translateX(-50%);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
<div class="circlem">
<p>
How Rules
</p>
</div>
</div>
I don't know if you have an actual reason to build it the way you built it, but there is a waaaaaaaaay much simpler way to do this. In my opinion, you are overthinking it. How about this?
.hej {
width: 100%;
height: 1000px;
background-color: yellow;
text-align: center;
padding:20px;
}
.circlem p {
border-radius: 50%;
width:220px;
height:220px;
background:#fff;
margin:40px auto;
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
padding:50px;
}
See the DEMO
.hej {
width:100%;
/*height:1000px;*/
background-color:yellow;
text-align:center;}
.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;}
.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
/*background: white;*/
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;}
.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: -105vh auto 0;
/* width: 15vw; */
position: relative;}
Try this
yesterday I posted a question asking how can I center a div inside a div... Now I have another problem, I want to center a div on the screen. I want it to be in the middle and to take up 50% of the screen;
Here is a pic of the problem:
As you can see there isn't anything in the middle of the screen, that is my problem. Here is my HTML code:
* {
font-size: 100%;
font-family: Serif;
}
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
}
.items {
background-color: rgba(0,0,0,.5);
width: 100%;
text-align: center;
margin: 0;
}
#basicInfo{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: rgba(255,150,0,1);
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: rgba(255,150,0,1);
}
.navbar {
background-color: rgba(0,0,0,0.1);
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
min-height: 5%;
}
.button{
background-color: rgba(0,0,0,.5);
font-size: 2em;
color: white;
width: 33%;
margin: 0 .16%;
height: 100%;
float: left;
}
.button:hover{
background-color: rgba(0,0,0,.7);
}
.button a{
text-decoration: none;
display: block;
color: white;
text-align: center;
vertical-align: middle;
}
#textSpace {
background-color: rgba(0,0,0, .5);
width: 100%;
height: 50%;
display: block;
top: auto;
bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<div class="navbar">
<div class="button">
<b>Mateo</b>
</div>
<div class="button">
<b>Home</b>
</div>
<div class="button">
<b>Josh</b>
</div>
</div>
Any help is apriciated! Thanks in advance!
To horizontally centre a div in the middle of the screen use:
margin-left:auto;
margin-right:auto;
http://codepen.io/leongaban/pen/ACJta
^ Updated (I can never get SASS to work right in Codepen)
Can't align to the middle my elements above. Using SASS, I want to avoid using position hacks
<main>
<div class="gradient">
<div class="hero">
<img src="http://placehold.it/350x150" alt=""/>
</div>
</div>
<section class="tagline">
<h1>Hi there Lorem Ipsum <em>My name is Bob</em></h1>
<button>Learn More</button>
</section>
</main>
body {
font-family:Arial
}
.hero {
display: table-cell;
//position: relative;
margin: 0 auto;
// top: 42%;
// left: 10%;
text-align: center;
width: auto;
height: 447px;
vertical-align: bottom;
img {
width: 300px;
height: 280px;
text-align: center;
vertical-align: bottom;
border:0;
}
}
.tagline {
position: relative;
margin: 0 auto;
width: 100%;
height: 300px;
text-align: center;
color: blue;
background: gray;
z-index: 2;
h1 {
margin: 0 auto;
padding-top: 5%;
width: 80%;
font-size: 42px;
text-align: center;
}
em {
font-weight: bold;
}
button {
margin-top: 25px;
padding: 10px 20px;
font-family: Arial;
font-size: em(21);
color: white;
border: 0;
background: orange;
}
}
I was able to center your elements above my doing the following:
.hero {
margin: 0 auto;
text-align: center;
width: 50%;
height: 447px;
vertical-align: bottom;
}
It seems it did not want to center because you had specified width: auto