如何在父标记中对齐子标记

Question

我正在尝试制作一个“号召性用语”按钮。我有一个父标记，其中有两个标记，第一个

标记用于描述第二个标记标记用于按钮。但描述文本会破坏按钮对齐。如何正确对齐这些标签？ 截图：

HTML：

<div id="call-to-act">
<p>Description</p><a href="http://esakademi.com/ADB/" class="call2act">Button Text</a>
</div>

CSS：

div#call-to-act {
    background: #fff;
    width: 95%;
    height: 75px;
    position: relative;
    margin: 50px auto;
    -webkit-box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
    box-shadow: inset 10px 10px 72px -28px rgba(0,0,0,0.75);
}

div#call-to-act a.call2act {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:44px;
    line-height:44px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
    position: absolute;
    right: 2px;     
}
div#call-to-act a.call2act:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
div#call-to-act a.call2act:active {
    position:relative;
    top:1px;    }

谢谢！

类似的东西：

+----------------------------------------------+
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~               |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  +---------+  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  |         |  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  +---------+  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~               |
+----------------------------------------------+

是我正在寻找的。

Answer 1

---

要做到这一点：

+----------------------------------------------+
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~               |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  +---------+  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  |         |  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  +---------+  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~               |
+----------------------------------------------+

解决

Here

使用display：flex;

/* flex method beautiful */

.top6 {
  background-color: blue;
  height: auto;
  display: flex;
  align-items: center;
  vertical-align: middle;
}
.in6 {
  width: 20%;
  height: 100%;
  vertical-align: middle;
}
.in62 {
  width: 70%;
  height: 100%;
  vertical-align: middle;
}

<div class="top6">
  <div class="in62">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div class="right">

  </div>

  <div class="in6">
    <button>ButtonText
      <button</div>
  </div>
  <br>

用你的造型

LIVE DEMO