css - 如何对齐父标签中的子标签

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用你的造型