Question

我正在尝试将我的头像/徽标与网站标题（并排）对齐。我该如何做到这一点？

＆＃13;

html {
    background: #bdb4c1;
}

#logo {
    width: 100px;
    height: 100px;
}

hr {
    border: 0;
    color: red;
    border-bottom: 1px solid #101010;
}

body {
    max-width: 800px;
    height: 1000px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fafafa;
    margin: auto;
    padding: 20px;
    
}

h1, h3 {
    font-weight: 700;
    line-height: 1.5;
    color: #272727;
}

p {
    color: #383838;
}

＆＃13;

<body>
    
    <div id="title">
        <img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
        <h1>JOSH BAKOS</h1>
    </div>
    
    <hr>
    
    <h3>INFORMATION</h3>
    <p>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.</p>
    
    <h3>EXPERIENCE</h3>
    <p>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.</p>
        
    <p>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.</p>
    
    <h3></h3>
</body>

＆＃13;

Answer 1

您的<img>和<h1>代码无法对齐，因为<h1>是block元素。默认情况下，块元素显示在上一个html元素下方（即此处<img>下方）。

有许多可能的解决方案。一个简单的方法可能是移动<img>中的<h1>标记：

<h1><img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">JOSH BAKOS</h1>

Answer 2

另一个解决方案是将h1内的#title设置为内联块（这样你也可以控制它们的垂直对齐）：

html {
    background: #bdb4c1;
}

#logo {
    width: 100px;
    height: 100px;
}

hr {
    border: 0;
    color: red;
    border-bottom: 1px solid #101010;
}

body {
    max-width: 800px;
    height: 1000px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fafafa;
    margin: auto;
    padding: 20px;
    
}
#title * {
  vertical-align: top;
}
#title h1 {
  display: inline-block;
  margin-top: 0;
}
h1, h3 {
    font-weight: 700;
    line-height: 1.5;
    color: #272727;
}

p {
    color: #383838;
}

<body>
    
    <div id="title">
        <img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
        <h1>JOSH BAKOS</h1>
    </div>
    
    <hr>
    
    <h3>INFORMATION</h3>
    <p>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.</p>
    
    <h3>EXPERIENCE</h3>
    <p>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.</p>
        
    <p>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.</p>
    
    <h3></h3>
</body>

如何在文本旁边放置此图像？

2 个答案: