我想以自定义border
为中心,我似乎无法找到解决方案。
我可以对齐它,但我不知道如何让width
缩小,而不是占用h1
文本的整个#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
display: flex;
justify-content: center;
}
HTML:
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
<a href="#" id="button">Browse</a>
</div>
</div>
$string = '{"data":{"exchange_rates":{"2":[{"cryptoCurrency":"BTC","rateForCashCurrency":{"EUR":1273.261000,"USD":1358.5694870000000000}}],"4":[{"cryptoCurrency":"BTC","rateForCashCurrency":{"EUR":1033.839000,"USD":1103.1062130000000000}}]}},"message":null,"status":"ok"}';
$rates_o = json_decode($string);
var_dump($rates_o->data->exchange_rates->{4}[0]);
答案 0 :(得分:1)
你的意思是这样的吗?
使用
设置#textMain
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
片段
#TextMain {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
<a href="#" id="button">Browse</a>
</div>
</div>
答案 1 :(得分:0)
试试这个
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
display: flex;
margin:0 auto;
justify-content: center;
width:100px;
}
<强> Check it out 强>
答案 2 :(得分:0)
您必须将对齐设置为居中,将边距设置为自动。只需将以下封闭的div添加到按钮中即可。
<div style="margin:auto; width:200px;" align="center">
<a href="#" id="button">Browse</a>
</div>
答案 3 :(得分:0)
您只需将按钮包含在块级元素中即可。您可以使用<div>
,这样您的标记就可以了;
HTML
<div class="wrapper">
<a href="#" id="button">Browse</a>
</div>
CSS
.wrapper #button {
text-align:center;
}