sourcecode

이미지 옆에 텍스트를 수직으로 정렬하시겠습니까?

codebag 2023. 4. 8. 08:26
반응형

이미지 옆에 텍스트를 수직으로 정렬하시겠습니까?

안 돼?vertical-align: middle?vertical-align: top 동작합니다.

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

사실 이 경우 매우 간단합니다. 이미지에 수직 정렬을 적용하십시오.모두 한 줄로 되어 있기 때문에, 텍스트가 아니라, 이미지를 정렬하고 싶은 것입니다.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

FF3에서 테스트 완료.

이제 이러한 레이아웃 유형에 플렉스박스를 사용할 수 있습니다.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

수직 정렬의 간단한 기술은 다음과 같습니다.

한 줄 수직 정렬: 중간

이것은 간단합니다: 텍스트 요소의 줄 높이를 컨테이너의 줄 높이와 동일하게 설정합니다.

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

다중선 수직 정렬: 하단

용기에 대해 내부 div를 절대 위치시킵니다.

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

복수선 수직 정렬: 중간

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

IE의 이전 버전을 지원해야 하는 경우 <= 7

이게 전체적으로 제대로 작동하려면 CSS를 좀 해킹해야 합니다.IE를 사용하다 ★★top:50%와 (컨테이너에)top:-50%디브IE가 지원하지 않는 다른 기능인 고급 CSS 셀렉터를 사용하여 두 기능을 결합할 수 있습니다.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

가변 용기 높이 수직 정렬: 중간

더합니다.transform: translateY소유물.(http://caniuse.com/ #filength=filengthttp://http://caniuse.com/

다음 3라인의 CSS를 요소에 적용하면 부모 요소의 높이에 관계없이 부모 요소의 수직으로 중앙에 놓입니다.

position: relative;
top: 50%;
transform: translateY(-50%);

div플렉시블 컨테이너에 넣습니다.

div { display: flex; }

Now there are two methods to center the alignments for all the content:

방법 1:

div { align-items: center; }

데모

방법 2:.

div * { margin: auto 0; }

데모

해 .img size size size size size size size size size 의 글꼴 크기 값이 다릅니다.span그리고 당신은 그것들이 항상 컨테이너의 중앙에 있다는 것을 알게 될 것이다.

요.vertical-align: middle두 요소 모두 완벽하게 중심을 잡을 수 있습니다.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

승인된 답변에서는 아이콘의 중심이 옆에 있는 텍스트 높이의 절반에 맞춰집니다(CSS 사양에 정의되어 있습니다).텍스트의 맨 위나 맨 아래에만 어센더나 디센더가 눈에 띄면 이 정도면 충분하지만 조금 어색해 보일 수 있습니다.

중심 아이콘 비교

왼쪽은 텍스트가 정렬되어 있지 않고 오른쪽은 위와 같습니다.Vertical-align에 대한 라이브 데모는 이 문서에서 확인할 수 있습니다.

누가 시나리오에서 왜 효과가 있는지에 대해 이야기한 적이 있습니까?문제의 이미지는 텍스트보다 높을 수 있으므로 라인 상자의 상단 모서리를 정의합니다. vertical-align: top그러면 스팬 요소가 라인 상자의 맨 위에 배치됩니다.

의 vertical-align: middle ★★★★★★★★★★★★★★★★★」top첫 번째 요소는 상자의 기준선(모든 수직 정렬을 충족하기 위해 필요한 위치에 배치되어 다소 예측할 수 없는 느낌)에 상대적인 요소를 이동시키고 두 번째 요소는 라인 박스의 외부 경계에 상대적인 요소(더 구체적이다)에 상대적인 요소를 이동시키는 것입니다.

승인된 답변에 사용된 기법은 한 줄 텍스트(데모)에만 적용되며, 여기에 설명된 대로 여러 줄 텍스트(데모)에는 적용되지 않습니다.

여러 줄의 텍스트를 이미지 중앙에 수직으로 배치해야 하는 경우 몇 가지 방법이 있습니다(이 CSS-Tricks 기사에서 영감을 얻은 방법1과 방법2).

방법 1: CSS 테이블(FIDDLE)(IE8+(캐니우스))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

방법 #2: 용기상의 의사요소(FIDDLE)(IE8+)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

방법 3: Flexbox(FIDDLE)(캐니우스)

CSS(위의 바이올린에는 벤더 프리픽스가 포함되어 있습니다):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

이 코드는, IE 와 FF 로도 동작합니다.

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

이 설정을 입니다.line-height 의 높이로

참고로 정렬 "명령어"는 블록 레벨 태그가 아닌 인라인 태그이기 때문에 SPAN에서는 작동하지 않습니다.인라인 태그에서는 정렬, 여백, 패딩 등이 작동하지 않습니다.인라인의 목적은 텍스트 흐름을 방해하지 않기 때문입니다.

CSS는 HTML 태그를 인라인과 블록 수준의 두 그룹으로 나눕니다."css block vs inline"을 검색하면 훌륭한 기사가 나타납니다.

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(CSS의 핵심 원칙을 이해하는 것이 매우 번거롭지 않게 하기 위한 열쇠입니다.)

기본적으로는 CSS3로 넘어가야 합니다.

-moz-box-align: center;
-webkit-box-align: center;

line-height:30px텍스트가 이미지에 맞게 정렬되도록 범위를 지정합니다.

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

하나 할 수'먹다'를 입니다.line-height the の within within within the의 이미지 사이즈에 맞추어<div> 다음 이미지를 ' 낫다'로 vertical-align: middle;

그게 정말 가장 쉬운 방법이야.

을 못 봤어요.margin여기 이 문제에 대한 저의 해결책이 있습니다.

이 솔루션은 이미지 폭을 알고 있는 경우에만 작동합니다.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

이 범위 속성 쓰기

span{
    display:inline-block;
    vertical-align:middle;
}

display:inline-block;「 」를 사용하는 vertical-align이것들은 동질화 이다.

background:url(../images/red_bullet.jpg) left 3px no-repeat;

는 보통 3px 합니다.top이 값을 증감함으로써 이미지를 필요한 높이로 변경할 수 있습니다.

이미지를 다음과 같이 설정할 수 있습니다.inline element사용.display소유물

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

css에서 사용.

를 사용하여 텍스트를 가로로 정렬하려면 를 사용하여 를 사용하여 텍스트를 세로 중앙에 정렬합니다.

div{
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

css에서 사용.

div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

예를 들어 jQuery mobile의 버튼에서는 이미지에 다음 스타일을 적용하여 조금 조정할 수 있습니다.

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

멀티라인 솔루션:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

모든 브라우저 및 ie9+에서 동작

혼란스러울 수 있어, 나도 동의해.테이블 기능을 활용해 보십시오.이 간단한 CSS 트릭을 사용하여 웹 페이지 중앙에 모달 위치를 지정합니다.대규모 브라우저를 지원합니다.

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

및 CSS 부품:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

원하는 대로 작동하려면 이미지 및 테이블 컨테이너의 스타일을 조정하고 크기를 조정해야 합니다.즐거운 시간 되세요.

플렉시블 표시align-items: center;항목을 수직으로 정렬하는 가장 좋은 방법입니다.

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>it works.</span>
</div>

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

우선 인라인 CSS는 전혀 권장되지 않습니다.HTML을 엉망으로 만듭니다.

이미지와 스팬을 정렬하려면vertical-align:middle.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

왜 네비게이션 브라우저에 렌더링되지 않는지 모르겠지만, 이미지나 가운데 텍스트로 헤더를 표시하려고 할 때 보통 이런 스니펫을 사용합니다. 도움이 되었으면 합니다!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

2022년에는 거의 96%의 수정되지 않은 브라우저 지원으로 아무도 이 제품의 사용을 제안하지 않은 것에 놀랐습니다.grid레이아웃을 지정합니다.

이 JSFiddle에서는 OP의 목적을 달성하기 위해 필요한 라인이 3개뿐입니다(다만 비교를 위해 여러 개의 정렬이 제시됩니다).

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

, UI 의 에는, 옵션의 「UI」의 사용이 됩니다.gap상위 그리드 컨테이너 내의 각 그리드 항목 간 공간의 변조를 가능하게 하는 특성.div를 참조해 주세요.

점점의 grid

  1. 그리드 아이템의 간단한 수직 및 수평 정렬
  2. 그리드 항목 간 공간 변조
  3. 의 이미지를 사용)min-content 길이1'을 행)max-content또는 (휘파람에 표시되지 않음)을 사용하여 포장합니다.min-content내의 할 필요가 CSS는 JSFID로 표시됨).- CSS는 동작합니다.
  4. 현대적 접근법

의점의 grid

  1. 오래된 브라우저 지원은 더 어렵다
  2. 으로 보다 한 개발자가해야 합니다.한 것이 .이렇게 단순하지는 않습니다.block/inline-block
<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

다음과 같은 것이 필요할 수 있습니다.

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

처럼 하다, 하다, 하다, 하다, 하다, 하다, 하다.vertical-align★★★★★★★★★★★★★★★★★★:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS는 짜증나지 않아요.당신은 단지 설명서를 읽지 않을 뿐입니다.;P

언급URL : https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image

반응형

'sourcecode' 카테고리의 다른 글

PowerShell을 사용하여 텍스트 파일을 분할하려면 어떻게 해야 합니까?  (0) 2023.04.08
PowerShell에서 어셈블리를 로드하는 방법  (0) 2023.04.08
CSS를 사용하여 div의 애스펙트비를 유지합니다.  (0) 2023.04.08
IMG를 사용하는 경우와CSS 배경 이미지?  (0) 2023.04.08
VB의 여러 줄 문자열.그물  (0) 2023.04.08

'sourcecode'의 다른글

  • 현재글이미지 옆에 텍스트를 수직으로 정렬하시겠습니까?

관련글

댓글

티스토리툴바