Question

我是初学者并且遇到麻烦。我已经搜索了一个小时，现在试图弄清楚我将如何得到一个div（我的目的是作为一个链接）显示在页面的中心，但没有成功。下面是我的HTML和CSS代码，如果你能帮我弄清楚我做错了什么我会非常感激。

HTML

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="categories.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <title>Categories</title>
    </head>


    <body>
    <div class="container">

        <div class="row">
            <div class="category col-md-4 col-centered">
                <a class="link" href="http://google.com">TEST</a>
            </div>
        </div>
    </div>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

CSS

.col-centered{
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.category {
    text-align: center;
    font-size: 5em;
    background: #09719B;
    border-style: solid;
    border-color: black;
}

.category:hover {
    background-color: #064661;
}

.category a{
    color: white;
    display: block;
}

.category:hover a{
    color:white;
    text-decoration: none;
}

Answer 1

使用class：

category col-xs-8 col-xs-offset-2

而不是category col-md-4 col-centered 这将使div 4/12，即1/3

如果屏幕尺寸为<=md，则为父div的

。

这里是filddle link

Answer 2

在bootstrap css之后包含您的categories.css。如下。这会覆盖引导样式。

version: '2.1'
services:
  zookeeper:
    image: confluentinc/cp-zookeeper:latest
    ports:
      - "32181:32181"
    environment:
      ZOOKEEPER_CLIENT_PORT: 32181
      ZOOKEEPER_TICK_TIME: 2000

  kafka:
    image: confluentinc/cp-kafka:latest
    ports:
     - "29092:29092"
    environment:
      KAFKA_BROKER_ID: 1
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:32181
      KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:29092

请参阅此https://www.w3.org/TR/html401/present/styles.html#h-14.3.2

另一种方法是使用bootstrap类Docker version 1.13.1, build 092cba3 docker-compose version 1.11.1, build 7c5d5e4

Answer 3

您应该使用const来auto ucharptr = reinterpret_cast<unsigned char*>(const_cast<void*>(const_void_ptr));居中。如果使用默认引导程序，则网格有12列。你的div需要4列，所以将它偏移4列会使它从第4列开始，到第8列结束，这与居中相同。

我强烈建议您阅读Bootstrap grid，尤其是offsetting部分。

这是一个有效的JSFiddle

以4列Div In Bootstrap为中心

3 个答案: