如何在页面中心获得引导按钮？

问题描述：

我希望我的按钮在页面中间对齐，但使用我的代码时不起作用。如何在页面中心获得引导按钮？

我的代码：

button { 
margin-left: auto; 
margin-right: auto; 
max-width: 100px; 
}

你的意思是水平居中？或者你想让它在页面中垂直居中呢？ –

答

尝试margin: 0 auto改变;

是的，使用'margin'本身就应该这样做，而不是'margin-left'和'margin-right'，如果你想让它响应你可以'保证金：10％auto' –

答

HTML：

<div> 
    <button> 
     Hello 
    </button> 
</div>

CSS：

button { 
margin-left: auto; 
margin-right: auto; 
max-width: 100px; 
} 

div { 
text-align: center; 
}

虽然这段代码可能会回答问题，提供关于如何解决问题和/或为什么解决问题的附加背景可以提高答案的长期价值。 – Badacadabra

答

你应该使用在自定义CSS自举类时，你可以。

父母上使用.text-center。

button 
 
{ 
 
    max-width: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center"> 
 
    <button>button</button> 
 
</div>

或者，如果你不想这样做，只需添加.center-block（或display: block）的按钮。

button 
 
{ 
 
    max-width: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <button class="center-block">button</button>

答

您可以使用Flexbox的使其居中。

div { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

如何在页面中心获得引导按钮？

相关推荐