정렬 헤더 및 로고

나는 CSS와 HTML에 최근에 새로운 오전 헤더에 나의 로고와 제목을 정렬하는 동안 문제가 : 나는 몇 가지 솔루션을 시도하지만 성공하지 않은정렬 헤더 및 로고

enter image description here

. 네가 나에게 힌트를 줄 수 있다면 고마워. 감사.

HTML 코드 :

<! DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title goes here</title> 
    <meta name="description" content="Description of your site goes here"> 
    <meta name="keywords" content="keyword1, keyword2, keyword3"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="page"> 
<div class="header" > 
<h1> <img src="images/img1.jpg" width="250" height="190" float="right" /> Some text here </h1> 
</div> 
</body> 
</html>

내 CSS 코드 :

body { 
 
    font-family: sans-serif, Arial; 
 
    font-size: 12px; 
 
    color: #000000; 
 
    margin: 0px; 
 
    background-color: #d9d7d7; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
ul, 
 
ol, 
 
li, 
 
form, 
 
input, 
 
textarea { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    color: black; 
 
} 
 
.page { 
 
    width: 1000px; 
 
    float: left; 
 
    padding: 42px 0px 0px 0px; 
 
} 
 
.header { 
 
    position: absolute; 
 
    top: 42px; 
 
    margin-left: -500px; 
 
    left: 50%; 
 
    width: 1000px; 
 
    background-color: white; 
 
    border-style: solid solid none solid; 
 
    border-width: thick; 
 
} 
 
.header h1 { 
 
    display: inline; 
 
    text-align: left; 
 
    font-family: cursive; 
 
    font-size: 45px; 
 
    color: black; 
 
} 
 
h1 img { 
 
    vertical-align: middle; 
 
}

<div class="page"> 
 
    <div class="header"> 
 

 
    <h1> <img src="images/img1.jpg" width="250" height="190" /> Some text here </h1> 
 

 
    </div>

출처

2014-11-13 JPV

내가 정확히 당신이 여기에서 무엇을 물어 모르겠어요. 조금 더 자세한 정보를 제공해 주시겠습니까? – jrenk

왜 h1 태그에 로고를 넣고 있습니까 – himanshu

h1 img {vertical-align : top;} – himanshu

하나의 솔루션처럼 IMG하는 vertical-align: middle을 사용하는 것입니다

body { 
    font-family: sans-serif,Arial; 
    font-size: 12px; 
    color: #000000; 
    margin: 0px; 
    background-color:#d9d7d7; 
} 
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea { 
    padding: 0px; 
    margin: 0px; 
    color: black; 
} 
.page { 
    width: 1000px; 
    float: left; 
    padding: 42px 0px 0px 0px; 
    position: center; 
} 
.header { 
    position:absolute; 
    top:42px; 
    margin-left:-500px; 
    left:50%; 
    width: 1000px; 
    height: 200px; 
    background-color: white; 
    border-style: solid solid none solid; 
    border-width: thick;  
} 
.header h1{ 
    display: inline; 
    text-align: left; 
    font-family: cursive; 
    font-size: 45px; 
    color: black; 
}

감사합니다

float="right" 또한 유효한 html 속성입니다. 유효한 이미지 html 속성을 보려면 image MDN을보십시오. HTML 코드에서

출처

2014-11-13 13:39:30

<h1> 
    <img src="http://lorempixel.com/250/190/" width="250" height="190" /> 
    <p>Some text here</p> <!-- Put your text into a <p> --> 
</h1>

당신의 CSS에서 :

.header h1{ 
    display: block; /* display: block; */ 
    text-align: left; 
    font-family: cursive; 
    font-size: 45px; 
    color: black; 
} 
/* And this */ 
.header img { 
    display: block; 
    float: left; 
} 
.header p { 
    line-height: 190px; /* Here is the trick... line-height = image height */ 
}

Finddle : http://jsfiddle.net/4sfab9u0/

출처

2014-11-13 13:45:36 giordanolima

정렬 헤더 및 로고

답변

관련 문제