Trying to put my header button in the center of the page - html

Question

Trying to put my header button in the center of the page
This is my css:
header div {
height: 250px;
width:950px;
background-color: white;
border-width: 5px;
border-style: solid dark-blue 5px;
border-radius: 10px;
margin: auto;
padding-top: 50px;
clear: both;
float: center;
vertical-align: middle;
}
my html:
<header>
<div> <img src="test.png"> </div>
</header>

Answer 1

float takes only three values: left, right and none.
Change the float: center to text-align: center and replace border-width: 5px; border-style: solid dark-blue 5px; with border: 5px solid darkblue;
header div {
height: 250px;
width:950px;
background-color: white;
border: 5px solid darkblue;
border-radius: 10px;
margin: auto;
padding-top: 50px;
clear: both;
text-align: center;
vertical-align: middle;
}
<header>
<div>
<img src="http://dummyimage.com/300x200/000/fff" />
</div>
</header>

Answer 2

update
As you added your code (in an answer?) i see what you want and here is what you want:
.gradient {
/* can be treated like a fallback */
background-color: #F8F8FF;
/* will be "on top", if browser supports it */
background-image: linear-gradient(#F8F8FF, #00BFFF);
/* these will reset other properties, like background-position, but it does know what you mean */
background: #F8F8FF;
background: linear-gradient(#F8F8FF, #00BFFF);
}
* {
/* Reset the default styles.
Use border-box because it's easier! */
padding:0;
margin:0;
box-sizing:border-box;
text-align: center;
}
body {
background:#DCDCDC;
color:aliceblue;
font-family:'Open Sans', sans-serif;
font-weight:300;
margin:0 auto;
/* Click-and-drag or text-selection doesn't make sense. */
/* Or long-tap on webkit phones. */
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
main {
/* Use a max-width so that we have 4 columns */
max-width:680px;
margin:auto;
padding:20px;
}
header {
text-align:center;
margin:0 5px 36px 5px;
font-size:24px;
background:white;
}
ul {
/* We don't need actual bullets */
list-style:none;
}
li {
float:left; /* So that they wrap */
height:150px;
width:150px;
margin:5px; /* The gaps between them */
text-transform:capitalize;
/*transition may need prefixes in some browsers */
-webkit-transition:.2s -webkit-transform, 1s opacity;
-moz-transition: .2s -moz-transform, 1s opacity;
-o-transition: .2s -o-transform, 1s opacity;
transition: .2s transform, 1s opacity;
/*transform*/
-webkit-transform:perspective(800px);
-moz-transform:perspective(800px);
-ms-transform:perspective(800px);
-o-transform:perspective(800px);
transform:perspective(800px);
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin-x:50%;
-webkit-transform-origin-y:50%;
text-align:center;
cursor:pointer;
}
/* When moused over, rotate it! */
li:active {
/*transform*/
-webkit-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
-moz-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
-ms-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
-o-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
}
/* It'd be neat to have double-width tiles */
.span2{
width:310px;
}
/* Icon and number */
li i{
font-size:60px;
margin:35px 0 0;
}
/* Text label on tiles */
li span{
position:absolute;
bottom:8px;
left:8px;
}
a:link {
text-decoration: none;
color: black;
}
/* Specialized background colours */
.smartwatches{
background:yellow;
color: black;
}
.tabletpc{
background:rgb(27, 161, 226);
}
.inktoner{
background:rgb(240, 163, 10);
}
.kenton{
background:rgb(119, 158, 203);
}
.Healthfitness{
background:rgb(0, 80, 239);
}
.accessories{
background:rgb(119, 221, 119);
}
.cellc{
background:rgb(0, 192, 0);
}
.mweb{
background:rgb(27, 161, 226);
}
.messages{
background:rgb(240, 163, 10);
}
.contacts{
background:rgb(119, 158, 203);
}
.internet{
background:rgb(0, 80, 239);
}
.maps{
background:rgb(119, 221, 119);
}
.jobcard{
background:rgb(130, 111, 214);
}
.asktechguy{
background:rgb(100, 118, 135);
}
.register{
background:rgb(255, 105, 97);
}
.agentsreseller{
background:rgb(162, 0, 37);
}
header {
position: relative;
height: 250px;
border: solid blue 5px;
}
header div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
footer div {
height: 100px;
background-color: grey;
border: solid darkblue 5px;
border-radius: 10px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 50px;
clear: both;
float: center;
}
<!-- ontouchstart makes :active work in mobile Safari -->
<body ontouchstart="" class="gradient" >
<main>
<header>
<div> <img src="img.png" /> </div>
</header>
<!-- Now make the tiles! -->
<!-- Use the <i> to make the icon and number -->
<!-- Move the <span>s in CSS so they appear in the bottom left corner -->
<ul>
<li class="smartwatches"><i class="fa fa-smart-watches"> <img src=""/> </i><span> <a href="#"> Smart Watches<a/></span></li>
<li class="tabletpc"><i class="fa fa-tabletpc"> <img src=""/> </i><span> Tablet pc's</span></li>
<li class="inktoner"><i class="fa fa-inktoner"> <img src=""/> </i><span>Ink & Toner</span></li>
<li class="kenton"><i class="fa fa-kenton"> <img src=""/> </i><span> Kenton products</span></li>
<li class="Healthfitness"><i class="fa fa-healthfitness"> <img src=""/> </i><span> Health & Fitness</span></li>
<li class="Accessories"><i class="fa fa-accessories"> <img src=""/> </i><span> Accessories</span></li>
<li class="cellc"><i class="fa fa-cellc"> <img style="position: absolute; top: 15px; left:20px; right:20"src="http://logo.jpg" height="80px" width="100px"/> </i><span> CellC Deals </span> </li>
<li class="mweb"><i class="fa fa-mweb"> <img style="position: absolute; top: 15px; left:20px; right:20" src="http://eeb-logo.jpg" height="80px" width="100px"/></i><span> WEB </span></li>
<li class="photos"><i class="fa fa-instagram"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="settings"><i class="fa fa-gears"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="phone"><i class="fa fa-phone"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="messages"><i class="fa fa-comments"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="jobcard"><i class="fa fa-jobcard"> <img src=""/></i><span><a href="#"> Job Card Bookings<a/></span></li>
<li class="asktechguy"><i class="fa fa-asktechguy"> <img src=""/></i><span><a href="#"> Ask Tech Guy<a/></span></li>
<li class="register"><i class="fa fa-register"> <img src=""/></i><span><a href="#"> Register here<a/></span></li>
<li class="agentsresellers"><i class="fa fa-map-agentsresellers"> <img src=""/></i><span><a href="#"> Agents & Resellers<a/></span></li>
</ul>
</main>
<footer>
<div>
<p></p>
<p> All rights reserved E-C </p>
<p> Designed by Eng </p>
</div>
</footer>
</body>
Just use css attribute text-align.
text-align: center;
See http://jsfiddle.net/g7hecLjo/

Answer 3

There is no float:center.
try something like this:
<div class="outer">
<div class="inner">
<img src="somwhere.html"> <!-- this will be centered -->
</div>
</div>
the CSS
div.outer {
text-align:center;
}
div.inner {
display:inline-block;
}
display:inline-block causes the inner div to shrink-wrap the image (or whatever you want to center). The text-align:center; moves it to the middle of the outer full-width div. HTH.
Also while the simple text-align:center works for inline elements, the technique I show here allows you to center block level elements such as menus created from unordered lists.

Answer 4

user4285276, I have encountered this exact problem on numerous sites of mine. Many of the other answers are more complex than they need to be, so I’d recommend trying this method first. Let me tell you how to center an image, regardless of a div, nav, or header around it, and then we can work from there. The CSS needed to center a single item is very simple.
img {
position: absolute;
left: 50%;
margin-left: -Xpx
}
In this code, X is equal to half of the width of your image or other object. So the code for your image if it was 100 pixels wide would show X as 50.
img {
position: absolute;
left: 50%;
margin-left: -50px
}
In other words, this code tells the image to move halfway across the page, then move half of the image’s width back towards the side of the page, centering it perfectly. To execute this in your code, do the following steps.
A. Set header width to 100%.
B. Add the following code to the div nested within your header, where X is equal to half of your div’s width.
div header {
position: absolute;
left: 50%;
margin-left: -Xpx
}
C. Add the same code to the image nested within your div, where X is equal to half of it’s width.
#yourimage {
position: absolute;
left: 50%;
margin-left: -Xpx
}
So at the end of all this, your basic HTML would look like this:
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<img id="yourimage" src="image.png">
</div>
</header>
</body>
</html>
...and your CSS would look like this:
header {
width: 100%;
}
header div {
position: absolute;
width: 400px;
right: 50%;
margin-right: -200px;
}
#yourimage {
position: absolute;
width: 100px;
height: 100px;
right: 50%;
margin-right: -50px;
}