将链接与其旁边的标题垂直居中

Question

我有以下HTML标头。它是一个简单的标题栏，后面有一个href。 但是标题<h1>位于href之下。我不想要那个。 我想要的是一个带有居中标题和按钮的简单标题栏 与标题一样高度相同。

＆＃13;

＆＃13;

html,
body {
    height: 100%;
    margin: 0;
    background-color: #EEEEEE;
    font-family: 'RobotoDraft', 'sans-serif';
}

header {
    background: #FFFFFF;
    height: 60px;
    width: 100%;
    box-shadow: 0px 2px 1px #888888;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

h1 {
    color: black;
    text-align: center;
    padding: 15px 0;
    margin: 0;
    font-size: 30px;
}

＆＃13;

<header>
    <a href="#">Back</a>
    <h1>Photo Framed</h1>
</header>

＆＃13;

＆＃13;

＆＃13;

我如何实现这一目标？

这就是现在的样子：

由于我对HTML和CSS的世界都很陌生，我不知道如何不让后面的href推倒标题。后来我想用图像替换href。它应该与图像相同。我有一个15px的填充标题。我还想为后面的href提供15px填充，并希望它与标题一样高。

Answer 1

您可以设置line-height并使其值与h1的高度相同。

a {
    float: left;
    line-height: 60px;
}

http://jsfiddle.net/epxhnohr/

或者使用绝对position代替float，并与line-height结合使用。

a {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 60px;
}

http://jsfiddle.net/epxhnohr/1/

Answer 2

试试这个...... http://jsfiddle.net/devkickstart/Lcy2kf0j/

if (isset($_SESSION['loggedIn'])==1){ ?>
  <td><a href="processors/process.php?i=<?php echo $editID ?>">Edit</a></td>
<?php } ?>

Answer 3

我猜你也可以使用display:inline-block;。