<body>
<div class="navbar-collapse collapse inverse" id="navbar-header">
<div class="container-fluid">
<div class="about">
<h4>text</h4>
<p class="text</p>
<div class="imgWrapper">
<img id="photo" src="path/to/file"/>
</div>
</div>
<div class="social">
<p>text</p>
</div>
</div>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<a id="logoutButton" href="logout.php" class="btn btn-lg btn-
primary">Logout</a>
<button id="navbar-button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<a href="#" class="navbar-brand">Media Manager</a>
</div>
</div>
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album list</h1>
<p id="jumbotron-header-text" class="lead text-muted">text</p>
<p>
<div id="fakeButton" class="col-sm-4 col-xs-4">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</p>
</div>
</section>
...
我正试图在我的Jumbotron上将id为“fakeButton”的元素居中,而我却惨遭失败。我尝试过的事情:
1)CSS选择器
#fakeButton {
margin: auto !important;
float: none !important;
}
2)使用bootstrap类text-center:
<div class="span7 text-center"></div>
我正在使用Bootstrap 4.大部分代码都来自此Bootstrap示例:
http://v4-alpha.getbootstrap.com/examples/album/
我确保正确安装了Bootstrap,但我似乎无法弄清楚如何将该元素集中在一起。
答案 0 :(得分:2)
在text-center
上使用带有col-xs-12
的Bootstrap #fakeButton
课程。
使用:
<div id="fakeButton" class="col-xs-12 text-center">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
而不是:
<div id="fakeButton" class="col-sm-4 col-xs-4">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
请看下面的代码段:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar-collapse collapse inverse" id="navbar-header">
<div class="container-fluid">
<div class="about">
<h4>text</h4>
<p class="text"></p>
<div class="imgWrapper">
<img id="photo" src="path/to/file"/>
</div>
</div>
<div class="social">
<p>text</p>
</div>
</div>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<a id="logoutButton" href="logout.php" class="btn btn-lg btn-
primary">Logout</a>
<button id="navbar-button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<a href="#" class="navbar-brand">Media Manager</a>
</div>
</div>
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album list</h1>
<p id="jumbotron-header-text" class="lead text-muted">text</p>
<p>
<div id="fakeButton" class="col-xs-12 text-center">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</p>
</div>
</section>
&#13;
希望这有帮助!
答案 1 :(得分:2)
您的标记不正确,请更改以下内容:
此:
<p class="text</p>
对此:
<p class="text"></p>
而且:
<div id="fakeButton" class="col-sm-4 col-xs-4">
对此:
<div id="fakeButton" class="col-xs-12">
text-xs-center
元素中的班级.jumbotron
已经将按钮居中。
该按钮具有display: inline-block
,这就是为什么它以其祖先声明的text-align: center
为中心。
你真的有更多要纠正的事情:
将#fakeButton
换成.row
而不是<p>
代码。
改变这个:
<p>
<div id="fakeButton" class="col-xs-12">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</p>
对此:
<div class="row">
<div id="fakeButton" class="col-xs-12">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</div>
然后将其添加到您的CSS:
input[type="file"] {
display: block;
}
input[type="file"] {
display: block;
}
&#13;
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse collapse inverse" id="navbar-header">
<div class="container-fluid">
<div class="about">
<h4>text</h4>
<p class="text"></p>
<div class="imgWrapper">
<img id="photo" src="path/to/file" />
</div>
</div>
<div class="social">
<p>text</p>
</div>
</div>
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<a id="logoutButton" href="logout.php" class="btn btn-lg btn-
primary">Logout</a>
<button id="navbar-button" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<a href="#" class="navbar-brand">Media Manager</a>
</div>
</div>
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album list</h1>
<p id="jumbotron-header-text" class="lead text-muted">text</p>
<div class="row">
<div id="fakeButton" class="col-xs-12">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
</div>
</div>
</section>
&#13;
答案 2 :(得分:1)
尝试将text-center
类添加到按钮本身:
<label for="files" class="btn btn-primary btn-lg text-center">Select Image</label>
或者将你的html更改为:
<div id="fakeButton" class="col-xs-12 text-center">
<label for="files" class="btn btn-primary btn-lg">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>