centering div with css

本文介绍了centering div with css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的css文件的代码片段

This is the snippet from my css file

#centered{
    position: relative;
    text-align: center;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
#table{
    text-align: center;
    font-size: 1.5em;
    font-weight: 900;
    background-color: #5E9DC8;
}

这是我要使用的html部分：

This is the html section that I'm trying to use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <title>Bicycle Store Database</title>
    <link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>

    <h1>ACME BICYCLE SHOP</h1>
    <h2>GET IN GEAR!</h2>

    <div id="centered">
    <table id="table" border="0" cellpadding="10"> 
        <tr>
            <td><a href="search_inv.php" class="navTest">Go Shopping!</a><br/><br/>
            <a href="search_service.html" class="navTest">Check a Service Ticket</a></td>
        </tr>
    </table>
    </div>

    <p><br/><a href="index.html">HOME</a></p>
</body>
</html>

这是结果：

img src =https://i.stack.imgur.com/030BN.pngalt =div is not centered>

我读过的一切表示我已经做到这一点正确，但它在我所有的浏览器中心。任何想法？

Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?

推荐答案

为什么使用表格？任何具体原因？你不能这样做吗？

Why you are using table for that? any specific reason? Can't you simply do it like this?

<div class="center">
  <a href="#">Go Shopping</a>
  <br>
  <a href="#"></a>
</div>

.center {
   margin: auto;
   /* Other styles goes here, width height background etc */
}

这篇关于centering div with css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

CSS