Question

这是我的新手，我试图使图像和文本在页眉中彼此对齐，但不会移动。文本位于图像的底部。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="chrome_homepage_css.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="image">
                <img src="logo.png">
            </div>
            <div class="text">
                <h1>Text Here</h1>
            </div>
        </div>
    </header>
</body>

</html>

.header .text {
    font-family: sans-serif;
    font-size: 32px;
    color: rgb(26,30,170);
}

.header .image
.header .text {
    display: inline-block;
    vertical-align: middle;
}

Answer 1

这应该有效

<span class="image">
        <img src="logo.png">
</span>
<span class="text">
         <h1>Text Here</h1>
 </span>

Answer 2

  .header{
     display:inline-block;
     width:100px;
   }
  .text{
     display:inline-block;
     width:100px;
   }

输入宽度

Answer 3

只需将float：left添加到图像和文本父类。

Suggested CSS

.header{
  float:left;
}

.image, .text {
  float:left;
}

Answer 4

这应该有效

<p><img style="float: left; margin: 0px 15px 15px 0px;" src="file:///C:/Users/Administrator/Desktop/search-icon.png" width="100" />Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.<br style="clear: both;" /></p>

Answer 5

我能够掌握所有人的建议并使其起作用，我将div更改为建议的跨度。但必须使用长度添加垂直对齐，以使其达到我想要的位置。非常感谢！

        <span class="image">
            <img src="logo.png">
        </span>
        <span class="text">
            <h1>Text Here</h1>
        </span>

.image {
    display: inline-block;
}

.text {
    display: inline-block;
    vertical-align: 25px;
}

Answer 6

我不推荐flexbox来进行内容对齐。

还添加justify-content来分隔所需的项目：

和align-items使它们垂直对齐：

align-items: stretch | flex-start | flex-end | center | baseline;

学习flexbox，您将再也不必为此担心。

.header .text {
    font-family: sans-serif;
    font-size: 32px;
    color: rgb(26,30,170);
}

.header {
  display:flex;
  align-items:center;
}

<body>
    <header>
        <div class="header">
            <div class="image">
                <img src="logo.png">
            </div>
            <div class="text">
                <h1>Text Here</h1>
            </div>
        </div>
    </header>
</body>

如何获取图像和文本以彼此对齐

6 个答案: