Question

我希望将我的徽标与标题标题和副标题对齐。

我尝试使用display: inline-block执行此操作。我没有成功，我也尝试过花车，但一切都搞砸了。

然后我在标题下放了一个hr（一行），但它太薄了，所以我想为它添加厚度，但我无法设法。

我已经查询了这个问题，但无法使用答案来帮助我，因为大多数人都使用了表格。

怎么做呢？

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
        <link href="styles.css" type="text/css" rel="stylesheet"/>
    </head>

    <body>
        <main>
            <header>
                <img class="logo" src="hidden.jpg" alt="Logo">

                <div id="title">
                    <h1>Lorem Epsum</h1>
                    <h3>Front Ninja</h3>
                </div>
            </header>

            <hr id="line">

            <section>
            </section>
        </main>
    </body>
</html>

文件style.css

html, body {
    padding: 0;
    margin: 20px;
    height: 100%;
    font-family: 'Quicksand', sans-serif;
}

header {
    padding: 25px;
    background-color: whitesmoke;
    display: inline-block;
}

.logo {
    height: 80px;
    width: 80px;
    margin-left: 300px;
    border: #F8981C solid 5px;
    border-radius: 99px;
}

#title {
    text-transform: uppercase;
}

#line {
    height: 100px;
    background-color: blanchedalmond;
    border: none;
}

Answer 1

因此。我认为问题是你需要垂直对齐。你拥有所需的所有html标记。我做了jsFiddle来帮助你。如果这是您正在寻找的，请告诉我。有几种方法可以定位元素;我刚刚添加了硬左边距以在线框中实现效果。

小提琴：https://jsfiddle.net/legendarylionwebdesign/b570pyo9/

hr {
    border: 0px;
    height: 2px;
    width: 100%;
    background: black;
}

.logo {
    display: inline-block;
    height: 100px;
    width: 100px;
    vertical-align: middle;
    margin-left: 100px;
}

#title {
    width: 200px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin-left: 200px;
}

Answer 2

对于标题，您可以像这样更改：

#title {
    margin-right: 300px;
    text-transform: uppercase;
    z-index: 100;
    position: absolute;
    right: 0;
    top: 20px;
}

使用顶部或放置宽度等等example。

水平对齐图像和标题标题（div），并将宽度添加到hr（无表）

文件style.css

2 个答案: