<div> 中 <p> 和 <img> 的格式问题

Question

问题：

我正在为网站制作标题。我想要我的网站的图片和名称 header。

问题是文本非常难看。我想将文本向上推，使其居中。

我认为问题会如何解决：

我怀疑答案与 padding 或 margin 有关，但我所有的修复尝试都没有做任何事情。

我的代码：

HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Camels</title>
        <link rel="StyleSheet" type="text/css" href="StyleSheet.css">
    </head>
    <body>
        <div id="header">
            <div class="main-pannel">
                <img id="logo" src="http://www.jamaicaobserver.com/assets/10972047/camel.jpg">
                <p id="title">Camelsgggg</p>
            </div>
        </div>           
    </body>
</html>

CSS:

body {
    margin: 0px;
    padding: 0px;

}
#header {

    margin: 0px;
    padding: 0px;
    background-color: #992e0c;
    height:100px;
    width:fill-available;
}

.main-pannel:hover{
    background-color: #cecece;
}
#logo{
    height: 100px;
    width: 100px;
    display: inline-block;
}
#title{
    display: inline-block;
    font-size: 50px;
    color: #000;
}

感谢任何帮助！ :) ~枪手

Answer 1

首先，您在 class <div class="main-pannel"> 中有一个拼写错误。猜想应该是main-panel.

其次，定义 line-height:100px; css 相当于包含文本的元素的 div 高度。在您的情况下，它应该是 main-panel。那应该将文本推到中间。

JSFiddle:

https://jsfiddle.net/sunalive/cx61z18p/1/

Answer 2

尝试使用此标题 css，使用变换通过 css 移动它。

#title{
    display: inline-block;
    font-size: 50px;
    color: #000;
     transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

要将其向右移动，您也可以随时使用 translateX。

Answer 3

试试这个代码。我使用了浮动技术并添加了一些填充。

<body>
    <div id="header">
        <div class="main-pannel">
            <img id="logo" src="http://www.jamaicaobserver.com/assets/10972047/camel.jpg">
        </div>
        <div class="main-title">
            <p id="title">Camelsgggg</p>
       </div>
    </div>           
</body>



body {
    margin: 0px;
    padding: 0px;

   }



#header {

    background-color: #992e0c;
    height:100px;
    width:100%;
   }

   .main-panel:hover{
    background-color: #cecece;
   }
   #logo{
    height: 100px;
    width: 100px;
    display: inline-block;
    float: left;
}
#title{
    display: inline-block;
    font-size: 50px;
    color: #000;
    margin: 0;
    padding-top: 20px;
}

.main-title {
  float: right;
}

https://jsfiddle.net/pnL2xdne/

<div> 中 <p> 和 <img> 的格式问题

Formating issue with <p> and <img> inside of a <div>

html

css

format

margin

padding