Question

我试图像这样制作标题：

Update-Database

我希望一切都在页面中间。

如果有人可以帮助我或将我链接到一个有用的网站，我会非常感激

Answer 1

我能想到的最简单，最基本的解决方案是使用<center>标记，并为每个元素添加相同的padding特征。以padding的数量玩，以达到你想要的距离。例如：

.distanced
{
        padding:20px; /*will control the distance between the spans*/
}

<center style="background-color:#aaaaaa">
 <span class="distanced"> HOME </span> <span class="distanced"> ABOUT </span> <span class="distanced"> LOGO </span> <span class="distanced"> CONTACTS </span> <span class="distanced"> LOGISTICS </span> 
</center>

Answer 2

您可以在页面中使用margin：0 auto作为居中元素。请尝试以下代码来开发您的设计。

http://codepen.io/ogzhncrt/pen/mJggdd

header {
  width:700px;
  margin:0 auto;
  background-color:#999;
  padding:10px;
  height:20px;
  color:#f4f4f4;
}

header ul {
  list-style:none;
  margin:0 auto;
}

header ul li {
  display:inline-block;
  float:left;
  margin-left:20px;
}

Answer 3

使用div可以设置定义的宽度并将它们放入容器中。

.container{
 width:500px;  

    margin:auto 0;
}
.item{
    margin-left:20px;
    border:black solid 1px;
        width:50px;
    height:50px;
    float:left

}

.search{
    margin-left:20px;
    border:black solid 1px;
 width:100px;
    float:left;
    height:50px;
}

我刚创建的

https://jsfiddle.net/bLxk96pq/工作示例

Answer 4

我建议您在脚本中使用表格，它们易于使用，您可以使用它们制作一些非常酷的东西。您可以使用上面的答案使其居中。例如，将它放在体内：

<div id="menu">
<table>
<tbody><tr>
  <td><b>HOME</b></td>
  <td><b>ABOUT</b></td>
  <td>*Put the logo here*</td>
  <td><b>CONTACTS</b></td>
  <td><b>LOGISTICS</b></td>
</tr></tbody>
</table>
</div>

然后在head / CSS中（Border是可选的，但它真的很酷。另外，你可以选择颜色和填充量）：

div#menu {
  background:red;
  height:35px;
  padding: 20px;
}
table {
  width:100%;
  border:3px solid black;
}
td, th {
  border:3px solid black;
}

Answer 5

它遵循代码非常简单，您只需将徽标用作菜单项。

<强> HTML

            <div class="container">
              <nav id="navbar" style="z-index: 100000" >
                <ul>
                  <li><a href="#" class="space-item"> Home </a></li>
                  <li><a href="#" class="space-item"> About </a></li>
                  <li><a href="index.html"><img src="http://neows.com.br/nav-center-logo/logo.png" width="250" height="100" alt=""/></a></li>
                  <li><a href="#" class="space-item"> Contact </a></li>
                  <li><a href="#" class="space-item"> Logistc </a></li>
                </ul>
              </nav>
            </div>

<强> CSS

            body {
                width: 100%;
                height: 100%;
                font-family: 'Ariar', sans-serif;
                color:#828282;
                font-size: 18px;
                max-width: 100%;
                padding-left: 0;
                padding-right: 0;
                margin: auto;
                clear: none;
                float: none;
                margin-left: auto;
            }
            .container {
              padding-right: 15px;
              padding-left: 15px;
              margin-right: auto;
              margin-left: auto;
              width: 960px;
            }

            #navbar {
                height: auto;
                float: left;
                position: relative;
                top: 20px;
                right: 0;
                z-index: 100000;
                width: 100%;
                text-align: center;
            }

            #navbar ul {
                padding: 0;
                margin-bottom: 0;
                margin-top: 0;
                list-style: none;
                margin: 0 auto;
            }
            #navbar ul li {
                display: inline-block;
                height: 22px;
            }
            #navbar ul li a {
                font-size: 16px;
                float: left;
                color:#828282;
                padding: 0 15px 0 15px;
                line-height: 1.1;
                text-decoration: none;
                vertical-align: central;
                font-weight: bold
            }
            #navbar ul li a:hover {
                text-decoration: none;
                color: #363636;
            }
            .space-item {
                margin-top: 40px;
            }

http://jsfiddle.net/furlanj1/zku320q3/

标题中的HTML中心图像

5 个答案: