将图形与文本右侧对齐并居中以创建按钮 - 无法将按钮居中

Question

http://codepen.io/gingerman/pen/VevZLR（最好看这里的代码）

当您打开代码笔时，您会看到按钮左对齐。

我在 button_container 居中时遇到问题，按钮的尖端没有脱落。

我在 Whosebug 上搜索过帮助，但没有找到解决方案。

谢谢:)

CSS

#button_container{
  position:absolute;
  text-align: center;
  top: 68px;
}


#button_join{
  display: inline-block;
    font-size:14px;
    font-weight:bold;
    color: #000;
    font-family:Helvetica, Arial, sans-serif;
    background-color:#fff;
    line-height: 31px;
  padding-left: 10px;
    border-radius:8px 0px 0px 8px;
  border:0 0 0 0;
}

#button_point{
  float:right;
  display: inline-block;
    height: 31px;
}





/* Default style, feel free to remove if not needed. */
body, body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

/* Div layer for the entire banner. */
#container_dc {
    position: absolute;
    width: 118px;
    height: 200px;
    border:1px solid #850f1e;
    top: 0px;
    left: 0px;
    margin: auto;
    overflow:hidden;
    font-family:Helvetica, Arial, sans-serif;
    font-weight:400;
    color:#fff;
    text-align:center;
}

#content_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #ee1a36;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

html

<div id="container_dc">

  <div id="content_dc">

    <div id="button_container">

        <div id="button_join">centre me</div>
          <img id="button_point" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269240/button_end_36_high.png">
        </div>

      </div>

    </div>

  </div>

</div>

Answer 1

您可以在 ID 为 #content_dc 的父元素上使用 flex 并删除 ID 为 #button_container 的元素的 css 规则:

/*REMOVE THIS
#button_container{
  position:absolute;
  text-align: center;
  top: 68px;
}*/

/*check comments in this rule*/
#content_dc {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #ee1a36;
  z-index: 100;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  display: flex;/*add flex*/
  justify-content: center; /*add justify-content center*/
  align-items: center; /*add align-items center*/
}

#button_join {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #fff;
  line-height: 31px;
  padding-left: 10px;
  border-radius: 8px 0px 0px 8px;
  border: 0 0 0 0;
}
#button_point {
  float: right;
  display: inline-block;
  height: 31px;
}
/* Default style, feel free to remove if not needed. */

body,
body * {
  vertical-align: baseline;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
}
/* Div layer for the entire banner. */

#container_dc {
  position: absolute;
  width: 118px;
  height: 200px;
  border: 1px solid #850f1e;
  top: 0px;
  left: 0px;
  margin: auto;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #fff;
}

<div id="container_dc">

  <div id="content_dc">

    <div id="button_container">
      <div id="button_join">centre me</div>
      <img id="button_point" alt="" title="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269240/button_end_36_high.png" />
    </div>
  </div>
</div>

参考资料

Using CSS flexible boxes

Answer 2

做这些小改动。在 CSS:

#button_container{
  position:relative;
  text-align: center;
  top: 68px;
  display: -webkit-inline-box;
}

将图形与文本右侧对齐并居中以创建按钮 - 无法将按钮居中

Aligning graphic to the right of text and centering to create button - can't centre button

html

css

center

alignment