Question

如何安排我的按钮，使其位于中间和上方元素下方。它必须与元素同步。

以下是我的代码：

＆＃13;

.position-message {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
    margin-bottom: 20%;
}

.background {
    background-color: maroon;
}

.button-shape {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

＆＃13;

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<Title>Click to get quotes</title>

<body class="background">
    <div class="container-fluid">
        <div class="col">
            <div class="row-xs-6">
                <div class="well position-message">
                </div>
            </div>
            <br>
            <br>
            <div class="row-xs-6">
                <button type="button" class="button-shape">
                </button>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

请参阅以下快照。按钮必须位于显示的位置，但也能响应屏幕。

Answer 1

只需将bootstrap提供的类text-center添加到每个div内的中心元素。

您还需要更正使用引导类的方式。它应该是container＆gt; row＆gt; col-*。 bootstrap V3中没有row-xs或col。

此外，您的title代码应该在head内。

.position-message {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
    margin-bottom: 20%;
}

.background {
    background-color: maroon;
}

.button-shape {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

<html>

<head>
<title>Click to get quotes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body class="background">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 text-center">
                <div class="well position-message">
                </div>
            </div>
            <div class="col-xs-12 text-center">
                <button type="button" class="button-shape">
                </button>
            </div>
        </div>
    </div>
</body>

</html>

Answer 2

   

    .position-message {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
    margin-bottom: 20%;
}

.background {
    background-color: maroon;
}

.button-shape {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.row-xs-6{
   text-align: center;
}

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<Title>Click to get quotes</title>

<body class="background">
    <div class="container-fluid">
        <div class="col">
            <div class="row-xs-6">
                <div class="well position-message">
                </div>
            </div>
            
            <div class="row-xs-6">
                <button type="button" class="button-shape">
                </button>
            </div>
        </div>
    </div>
</body>

</html>

Answer 3

将display: table;和margin: auto;添加到.button-shape班级：

 .button-shape {
    border-radius: 50%;
    width: 50px;
    height: 50px; 
    display: table;
    margin: auto;
}

如何按行/相对于其上方的元素排列按钮/元素？

3 个答案: