仅将文本与带有阴影框和角的图标垂直对齐

Question

我已经创建了一个按钮，HTML 如下所示：

<div class="blue_text"><button class="blue_small" id="blue_small"></button> View this video instead.</div>

CSS 如下。文本垂直对齐而不改变现有标记：

#blue_text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}

用于垂直对齐按钮而不更改现有标记。

​button {
vertical-align:middle;
}

按钮CSS总数：

.blue_small {
 height: 40px;
width: 40px;
margin-left:16px;
margin-bottom:1px;
background-color:#fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
background:url(../images/index_video_small2.svg) no-repeat 5px 7px;
-webkit-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);  
-moz-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
color:#48c4d2; font-size:15px;
    font-family:opensansitalic;}

我想将以上所有内容结合到 CSS 中，如下所示，并带有青色阴影框？我从来没有试过这个。

align top http://www.kerrydeaf.com/shade2.png

更新：我在另一个容器的底部有这个 div >，但是有可见的间隙并试图缩小间隙但没有成功？我正在使用当前的 div >，如下所示。

<div class="blue_text"><button class="blue_small" id="blue_small"></button> View this video instead.</div>

这是一个可见的间隙，如下所示：

align top http://www.kerrydeaf.com/shade4.png

我希望用这个 查看这个视频来代替。

Answer 1

在此处查看我的工作示例：http://jsfiddle.net/2x6ub/3/

div.toggle_container { 
   position: relative;  // this makes the blue_text div being able to align to bottom
   border: 1px solid #000; height: 300px; // this is just to test, remove or adjust
}

.blue_text{ 
    background:#48c4d2; 
    color:#fff; 
    font-size:20px; 
    font-family:opensansitalic; 
    width:400px; 
    font-style:italic; 
    padding:20px; 
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    -moz-border-top-left-radius:20px;
    -moz-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;

    /* to align to bottom of parent container */
    position: absolute; 
    bottom: 0px;

 }