이미지를 인라인 텍스트로 가져 오기

-1

테스트 용 로고가 제목과 함께 표시되도록하려하지만 작동하지 않으며 문제를 설명하는 방법을 모르므로 picture을 게시합니다. 샘플 코드는 다음과 같습니다. 여기이미지를 인라인 텍스트로 가져 오기

.name { 
 
     background-color: #b56663; 
 
     font-family: Helvetica, Arial, sans-serif, "Times New Roman"; 
 
     color: white; 
 
     height: 100px; 
 
     margin: -8px 0 -5px -20px; 
 
     padding: 20px 0 0 30px; /*Top right bottom left*/ 
 
     width: 99.815%; 
 
    } 
 
    
 
    .name h1 { 
 
     margin: 20px 0 0 150px; 
 
    } 
 
    
 
    .logo { 
 
     height: 100px; 
 
     width: 100px; 
 
     margin: -53.8px; 
 
     padding: 0 0 0 75px; 
 
     border: 0; 
 
     display: inline; 
 
    } 
 

 
    body { 
 
     background-color: gray; 
 
    }

<body> 
 
    <img class="logo" src="images/logo.png" alt="logo"> 
 
    <div class="name"> 
 
    <h1>Lee Shewan</h1> 
 
    </div> 
 
</body>

출처

2017-12-23 Lee Shewan

당신은 당신이 같은 코드를 restruct 수

.name { 
 
    background-color: #b56663; 
 
    font-family: Helvetica, Arial, sans-serif, "Times New Roman"; 
 
    color: white; 
 
    height: 100px; 
 
    padding: 20px 0 30px 0; /*Top right bottom left*/ 
 
} 
 

 
.name h1 { 
 
    display: inline-block; 
 
} 
 

 
.logo { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0; 
 
    padding: 0 0 0 75px; 
 
    border: 0; 
 
    display: inline-block; 
 
} 
 
body { 
 
    background-color: gray; 
 
}

<body> 
 
    <div class="name"> 
 
    <img class="logo" src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg' alt="logo"> 
 
    <h1>Lee Shewan</h1> 
 
    </div> 
 
</body>

출처

2017-12-23 11:31:17

감사합니다. –

이동 :

body { 
 
    background-color: gray; 
 
} 
 
.name { 
 
    background-color: #b56663; 
 
    font-family: Helvetica, Arial, sans-serif, "Times New Roman"; 
 
    color: white; 
 
    height: 100px; 
 
    padding: 20px 30px; 
 
} 
 

 
.name h1 { 
 
    margin:10px 20px; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 

 
.name .logo { 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 0 0 0 75px; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<div class="name"> 
 
    <img class="logo" src="https://lorempixel.com/400/400/" alt="logo"> 
 
    <h1>Lee Shewan</h1> 
 
</div>

출처

2017-12-23 11:44:05

** 기본적으로 H1 태그는 블록 항목으로 스타일이 지정됩니다. 즉, 키보드에서 Enter 키를 누르는 것과 같은 종류의 왼쪽 및 오른쪽 정렬을 지 웁니다. 'display : inline-block;'을 추가하여 H1의 동작을 변경합니다 꼬리표. 따라서 동일한 div 태그에 img 및 h1을 삽입하여 html 코드를 줄일 수 있습니다. – omukiguy

@omukiguy'디스플레이 추가 : 인라인 블록; h1 태그의 동작이 바뀌 었습니다. 예. :) 저는 이미지의 디스플레이를 변경 한 것처럼 디스플레이를 변경하는 것이 좋지 않습니다. :) 예, h1에 넣고 배경을 만들고 위치를 사용하십시오. 플렉스, 그리드 등 모든 유효한 방법을 사용하십시오. –

쿨 (cool), 리 (Lee)에 대한 명확성을 높이고 더 많은 옵션을 제공합니다. – omukiguy

이미지를 인라인 텍스트로 가져 오기

답변

관련 문제