我试图<button>用flexbox的中心元素的中心元素justify-content: center.但Safari并不以它们为中心.我可以将相同的样式应用于任何其他标记,并且它按预期工作(请参阅<p>-tag).只有按钮左对齐.
尝试Firefox或Chrome,您可以看到差异.
是否有任何用户代理样式我必须覆盖？或者这个问题的任何其他解决方案？
div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}<div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>还有一个jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/
我正在尝试使用CSS网格布局来模拟一些响应行为,特别是:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
我的示例https://codepen.io/elgs/pen/goNxeL在Chrome中运行良好,但它似乎在Firefox中不起作用.您可以在水平调整浏览器大小时找到它.
另一个示例https://codepen.io/elgs/pen/YYoxOq适用于Chrome和Firefox.
html,body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: …Button是一个内联元素,但宽度属性适用于它,为什么会这样？
button {
width: 300px;
}<button>asdfsdf</button>
<button>234234d</button>