I'm probably turning mad but I really cannot seem to find out what I'm doing wrong. I'm simply trying to center my image.
<div class="container ">
<img src="design/images/logo.png" alt="logo" class="logo" />
<div class="contactData">
data
</div>
</div>
This is my CSS:
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
}
.contactData {
max-width: 206px;
margin: 30px auto 0 auto;
text-align: center;
float: none;
}
The contactData div just centers fine but the image doesn't.
add display:block; in your .logo
That should probably fix it
Use either display: block; or display: inline-block; while you are using margin: auto; for the images.
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
display: block;
}
Images are inline by default and you need to trigger hasLayout or something similar.
add this code
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
text-align: center;
vertical-align: middle;
You are not specifying any aligning for image.
In the container class, Just give
text-align:center;
In .logo just add display:block; in your CSS.
Related
.div-1 {
background-color: #deb887;
margin: 0 auto;
width: 100%;
height: auto;
display: inline-block;
}
.div-2 {
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
<div class="div-1">..... some code here </div>
<div class="div-2">..... some code here</div>
a white space is coming between 2 div, under one another
I found some solution of this problem, but they are not working.
vertical-align: top; ----- not working
line-height: 0px; ------ it effects on the text of div
font-size: 0px; ------- it also effects on text
*{
margin:0;
padding:0;
------------------ not working
Please help, thanks in advance.
.div-1{
display: block;
width: 100%;
background-color: #deb887;
margin: 0 auto;
height: auto;
}
.div-2 {
height: 10px;
vertical-align: top;
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
Try this way:
<div class="div-1">..... some code here </div><!--
--><div class="div-2">..... some code here</div>
Please note the comment syntax
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
I was creating a search tool for my website, and i wanted it to be in center, So i created main div container that would hold every search tool element, which had margin: 0 auto and it worked. But inside it another element which had margin: 0 auto; would not be centered.
HTML:
<div class="searchbox">
<div class="mover">
<input type="text" name="searchfield" class="search" placeholder="Search Item">
CSS:
.searchbox {
position: absolute;
width: 100%;
overflow: hidden;
left: 0%;
top: 55px;
height: 350px;
background-color: black;
}
.mover {
display: block;
z-index: 2;
background-color: white;
margin: 0 auto;
width: 70%;
height: 100%;
min-width: 600px;
height: 250px;
}
.search {
position: relative;
width: 70%;
height: 35px;
top: 100px;
margin: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
.search[type=text] {
color: black;
text-align: center;
font-family: 'Lato';
font-size: 15px;
}
Please note that i do not want width: 100% for search element, as you see in code, i have min-width: 600px defined, which is for other elements in mover which is not relevant in this case.
Please check out, Fiddle
What could the problem be? I have defined width on both elements, but margin auto still doesn't work, is there any way to fix this?
The <input> is an inline-level element, the margin: auto tricks only works for block level elements.
You can do:
.search {
...
width: 70%;
margin: 0 auto;
display: block; /*add this line*/
}
Or, if you prefer leave it as inline you can do:
.mover {
text-align: center;
}
I am trying to move an image. I Want it to be alligned with the title "Experience". Here is my code
html code
<header>
<h1>Experience</h1>
<div class="logo">
<img src="./img/exp.png">
</div>
</header>
and the css code
.logo{
width: 100px;
}
.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}
Just tweak the CSS a little:
.logo{
width: 100px;
display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
Does this work?
This solution worked for me, but I have no idea for you as you didn't put your full code...
Try adding float:left to .logo and setting display: inline-block on your h1, like so:
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 34px
}
header{
background-image: url(../img/bar.png);
background-color: #00B9ED;
height: 75px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
.logo{
width: 100px;
float: left;
//display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
h1 {
display: inline-block;
}
How about making margin-left: 0%; and margin-right. Depends where you want to move it.
You used shorthand for margin-left. We use shorthand for margin only. You did margin-left: top right bottom left instead. I don't think the program reads that correctly.
<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
I'm trying to make this 4 box's become centralized and side by side.
I'm using this code, but it's not working as i hope:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
http://i.imgur.com/V2DPlRa.png
You could remove float, display items as inline-block and set text-align: center to the container.
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
Fiddle: http://jsfiddle.net/9k2ae5vv/
You need to clear after float elements:
#main-content {overflow: hidden}
you must set width for your wrapper, and everything will be fine.
#main-content {
margin: 0 auto;
width: calc(4 * 279px);
}
look working example