如何将引导按钮组水平居中
问题描述:
我需要将按钮组居中置于页面顶部。我尝试添加自定义CSS和一个边距:0自动,但它没有帮助。有什么建议么?由于 (我使用的引导V4.0.0-alpha.6)如何将引导按钮组水平居中
HTML:
<head>
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="application.css">
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="application.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
Logo
</div>
<div id="button-container" class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
<button class="btn btn-primary">Button 3</button>
<button class="btn btn-primary">Button 4</button>
</div>
</div>
</body>
</html>
CSS:
#button-container {
width: 333px;
margin: 0 auto !important;
}
答
嗯按钮组是一个inline-block
元件所以只要把它一个class="text-center"
容器内,无论是标头本身或者单独的div这样演示:
<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">
<div id="header">
<div id="logo">
Logo
</div>
<div class="text-center">
<div id="button-container" class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
<button class="btn btn-primary">Button 3</button>
<button class="btn btn-primary">Button 4</button>
</div>
</div>
</div>
答
你可以尝试一些如下,
#button-container {
width: 333px;
margin: 0 auto !important;
left:50%; /*MODIFICATION*/
transform: translate(-50%,-50%); /*MODIFICATION*/
}
#button-container {
width: 333px;
margin: 0 auto !important;
left:50%;
transform: translate(-50%,-50%);
}
<head>
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
Logo
</div>
<div id="button-container" class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
<button class="btn btn-primary">Button 3</button>
<button class="btn btn-primary">Button 4</button>
</div>
</div>
</body>
+0
藏汉的工作,谢谢! – RT5754
非常感谢 – RT5754