相关疑难解决方法(0)

Flexbox无法处理按钮或字段集元素

我试图<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;
}

Run Code Online (Sandbox Code Playgroud)

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

Run Code Online (Sandbox Code Playgroud)

还有一个jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/

html css safari css3 flexbox

Ing*_*mar

2017 09-07

78
推荐指数

2
解决办法

3万
查看次数

如何在自定义按钮中对齐中心文字？

我有这个HTML

<head>
<title>HTML5 App</title>

<link rel="stylesheet" type="text/css" href="css/custom.css"> 
<link rel="stylesheet" type="text/css" href="css/buttons.css"> 

</head>

<body>
<!--Estructura -->


<div id="botones">
    <button class="btn" data-am-type="button">Soy un &lt;button&gt;</button>
    <a class="btn" data-am-type="button">Soy un &lt;a&gt;</a>
    <div class="btn" data-am-type="button">Soy un &lt;div&gt;</div>
    <input class="btn" type="button" value="Soy un <input>">
</div>

</body>

Run Code Online (Sandbox Code Playgroud)

在<button>和<input>中,文本是按钮的对齐中心,但在<a>和<div>中,文本显示在按钮的顶部.我认为<button>和<input>继承了一些属性,因此它们在按钮中间对齐文本.

我明白了

我希望所有按钮在中间对齐文本.

班级"btn"就是这个

.btn{
display: inline-block;
padding: 4px 12px; /* Padding por defecto */
font-size: 16px;  /* Tamaño fuente por defecto */
line-height: 20px; /* Tamaño de linea */
text-align: center;
vertical-align: middle;

font-family: 'Helvetica Neue', Helvetica, Arial, …

Run Code Online (Sandbox Code Playgroud)

html css html5 css3

Bae*_*Bae

2013 05-21

11
推荐指数

1
解决办法

5万
查看次数