This is the page: http://trozato.com/
I try to center the whole newsletter(mailchimp) div but it doesnt work. I have put the following code:
#mc_embed_signup {
margin: 0 auto;
so that it is centered. I want the dimensions to be 400px, also when I try to alter the dimensions of the submit buttons so that they are same, on the browser(chrome tools) with the following code it works but when I put it in the code NOT.
#mc_embed_signup input.button {
display: block;
width: 58%;
margin: 0 0 10px 0;
min-width: 90px;
}
the width: 58%; should do the work..no?
Easy: set the margin-left and margin-right of the Input elements to "auto".
Example CSS:
#mce-EMAIL
{
margin-left: auto;
margin-right: auto;
}
#mc-embedded-subscribe
{
margin-left: auto;
margin-right: auto;
}
Try this:
#mc_embed_signup input.button {
display: block;
width: 35%;
margin: 0 auto;
min-width: 90px;
}
#mc_embed_signup input.email {
display: block;
padding: 8px 0;
text-indent: 5px;
width: 58%;
min-width: 130px;
}
Related
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.
So, i'm trying to center three of my divs on the page, #header, #nav, and #headerImg. I can't seem to center my #header and #nav divs using margin: 0 auto; though. They seem to be stuck to the left side of my page when I refresh the page.
Here is my style.css for my page:
div#header{ //I only have one image here.
position:absolute;
padding: 10px 20px;
width: 960px;
height: 49px;
top: 0px;
background-color: #2E5E8D
}
div#nav{ //I have 4 links here
position:absolute;
margin: 0 auto;
padding: 10px 20px;
width: 960px;
height: 20px;
top: 69px;
background-color: #2E5E8D
}
div#headerImg{ //I have one image here,
position: relative;
display: block;
margin: 0 auto;
width: 1000px;
top: 95px;
}
div#content{
position:relative;
top:109px;
width:1000px;
display: block;
margin: 0 auto;
}
div#content a{
color: blue;
text-decoration: none;
}
#content a:hover{
color: red;
text-decoration: underline;
}
#content dt{
margin-top: 10px;
}
div#footer{
position: relative;
margin: 0 auto;
top: 109px;
background-color: #333333;
color: white;
text-align: center;
font-size: 14px;
width: 1000px;
padding: 10px;
}
The width on my #header and #nav have to be set to 960px as per instructors request, and I'm sure he wanted the image inside my #headerImg to be inside my #header div, but i couldn't get the image from overlapping. Therefore, that's the only div of the 3 that I can center.
I tried using margin: 0 auto; and display: block on both but they don't seem to work. I tried using margin: 0 10% which seemed to work on my computer, but it is misaligned on another computer. My comments in the code are just to show what I have in the div.
Try add div#header and div#nav the following rules:
margin-left: -500px;
left: 50%;
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.
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}