Question

如何让jumbotron中间的两个大按钮垂直和水平对齐？

我还想更改按钮的颜色，以便在将光标悬停在按钮上时更改颜色。

对于这两个按钮的大小，我使用了btn-xlarge，但我想知道一种更灵活的方式，我可以根据自己的喜好调整它的大小，而不仅仅是那些按钮，而是任何按钮。怎么样？

提前致谢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap For Beginners</title>
    <meta name="description" content="Hello World">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<style>

    .nav button {
        padding: 15px;
        font-size: 15px;
        margin: 10px;
    }
    .input {
        font-size: 20px;
    }
    textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {   
        -webkit-box-shadow: 11px 27px 176px -18px rgba(19,145,36,1);
-moz-box-shadow: 11px 27px 176px -18px rgba(19,145,36,1);
box-shadow: 11px 27px 176px -18px rgba(19,145,36,1);
    }
    .wrapper {
        text-align: center;
        vertical-align: middle;
    }
    .jumbotron {
        height: 450px;
        background: transparent;
    }
    .btn-xlarge {
    padding: 30px;
    font-size: 50px;
    line-height: normal;
    -webkit-border-radius: 40px;
       -moz-border-radius: 40px;
            border-radius: 40px;
    margin: 20px;
    }
    .footer button {
        padding: 15px;
        font-size: 15px;
        margin: 10px;
    }

</style>

</head>

<body>
    <div class="nav">
        <div class="container-fluid">
            <form class="form-inline">
                <div class="form-group">
                    <div class="wrapper">
                        <div class="col-xs-10">
                    <input type="text" class="form-control input-lg" id="exampleInputFeedback" placeholder="Have Feedback?">
                        </div>
                    </div>
                </div>
                    <button type="submit" class="btn btn-success">Submit Feedback</button>
                    <button type="link" class="navpill pull-right"><a href="#"></a>About</button>
                    <button type="link" class="navpill pull-right"><a href="#"></a>Contact</button>

            </form>
        </div>
    </div>

    <div class="jumbotron">
        <div class="container-fluid">
            <div class="wrapper">
                <button type="student" class="btn btn-xlarge">Student</button>
                <button type="student" class="btn btn-xlarge">Business</button>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container-fluid">
            <div class="wrapper">
                <button type="#" class="btn btn-block">By Loi Huynh, OU '18</button>
            </div>
        </div>
    </div>

    <!-- Latest compiled and minified JavaScript -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body> 
</html>

Answer 1

就水平对齐而言，您可以使用margin: 0 auto;，它将与父容器的中心对齐。要更改按钮的大小，您需要使用按钮上的css中的height和width属性，然后您可以根据需要制作它们。对于悬停，只需使用css hover选择器，然后在悬停时应用您想要的任何样式。

您可能想要阅读css：
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/cssref/pr_margin.asp

Answer 2

对于水平和垂直对齐，使用相对/绝对定位，如下所示：

HTML：

<div>
    <button type="button" name="button">Button</button>
</div>

CSS：

div {
width: 100%;
height: 500px;
background-color: #ff0000; }

div button {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate (-50%, -50%);
-moz-transform: translate (-50%, -50%);
-ms-transform: translate (-50%, -50%);
transform: translate (-50%, -50%);
padding: 4px 9px; }

你的按钮总是处于水平和垂直的中心位置，没有多少你调整包含div的大小。

这里是fiddle。

希望它有所帮助。

问候，米兰。

Answer 3

好的，这就是你需要的......

HTML：

<div class="container">    
    <div class="buttons_div">
        <button class="button_1" type="button">Button 1</button>
        <button class="button_2" type="button">Button 2</button>
     <div>  
</div>

CSS：

.container {
float: left;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 500px;
background-color: red; }

.container .buttons_div {
position: relative;
top: 50%;
margin: 0 auto;
width: 170px;
height: 25px; }

.buttons_div .button_1 {
float: left;
margin-top: 0;
margin-left: 0;
width: 80px;
height: 25px; }

.buttons_div .button_2 {
float: left;
margin-top: 0;
margin-left: 10px;
width: 80px;
height: 25px; }

这是fiddle。

问候，米兰。

在jumbotron中间获取按钮并改变外观

3 个答案: