尝试将标题按钮放在页面中央
这是我的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;
}
我的HTML：
<header>
<div> <img src="test.png"> </div>
</header>
答案 0 :(得分：1)
float只需要三个值：left，right和none。
将float: center更改为text-align: center，并将border-width: 5px; border-style: solid dark-blue 5px;替换为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>
答案 1 :(得分：0)
<强> 更新 当你添加你的代码时（在答案中？）我看到了你想要的东西，这就是你想要的东西：
.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> <a href="#">Tablet pc's</a></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> <a href="#">Kenton products</a></span></li>
<li class="Healthfitness"><i class="fa fa-healthfitness"> <img src=""/> </i><span> <a href="#">Health & Fitness</a></span></li>
<li class="Accessories"><i class="fa fa-accessories"> <img src=""/> </i><span> <a href="#">Accessories</a></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><a href="http://e-clearexpress.co.za/store/index.php/cellc"> CellC Deals </a></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><a href="http://e-cleab"> WEB </a></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 <a href="http://www..co.za"> Eng</a> </p>
</div>
</footer>
</body>
只需使用css属性text-align。
text-align: center;
答案 2 :(得分：0)
没有浮动：中心。
尝试这样的事情：
<div class="outer">
<div class="inner">
<img src="somwhere.html"> <!-- this will be centered -->
</div>
</div>
CSS
div.outer {
text-align:center;
}
div.inner {
display:inline-block;
}
display：inline-block导致内部div收缩包装图像（或任何你想要居中的）。 text-align：center;将它移动到外部全宽div的中间。 HTH。
虽然简单的text-align：center适用于内联元素，但我在这里展示的技术允许您将块级元素居中，例如从无序列表创建的菜单。
答案 3 :(得分：0)
user4285276，我在我的很多网站上遇到过这个问题。许多其他答案比他们需要的更复杂，所以我建议首先尝试这种方法。让我告诉你如何使图像居中，无论它周围是div，nav还是标题，然后我们就可以从那里开始工作。集中一个项目所需的CSS非常简单。
img {
position: absolute;
left: 50%;
margin-left: -Xpx
}
在此代码中，X等于图像或其他对象宽度的一半。因此，如果图像的宽度为100像素，则代码将显示X为50。
img {
position: absolute;
left: 50%;
margin-left: -50px
}
换句话说，此代码告诉图像在页面中间移动，然后将图像宽度的一半移回页面的一侧，使其完美居中。要在代码中执行此操作，请执行以下步骤。
一个。将标题宽度设置为100％ B.将以下代码添加到嵌套在标题中的div，其中X等于div宽度的一半。
div header {
position: absolute;
left: 50%;
margin-left: -Xpx
}
℃。将相同的代码添加到嵌套在div中的图像，其中X等于宽度的一半。
#yourimage {
position: absolute;
left: 50%;
margin-left: -Xpx
}
所以在这一切结束时，您的基本HTML将如下所示：
<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>
...你的CSS看起来像这样：
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;
}