CSS 수직 정렬 : 내용 전과 후

CSS 수직 정렬 : 내용 전과 후

---

이 질문에 이미 답변이 있습니다.

• CSS를 사용하여 텍스트를 세로로 가운데 정렬하려면 어떻게합니까? [중복] 38 개 답변

이미지와 링크를 중앙에 배치하려고하는데 어떤 식 으로든 콘텐츠를 수직으로 이동할 수 없습니다.

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

아이콘은 22 x 22px입니다.

.pdf {
    font-size: 12px;
}
.pdf:before {
    padding:0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
}
.pdf:after {
    content: " ( .pdf )";
    font-size: 10px;
}
.pdf:hover:after {
    color: #000;
}

---

vertical-align CSS 속성에 대한 조언을 읽은 후 내 질문에 답변했습니다. 팁 고마워!

.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}

---

나는 더 CSS 전문가는 아니지만, 당신은 넣어 경우 무슨 일이

vertical-align: middle;

당신에

.pdf:before

지시?

---

다음과 같이 테이블을 사용하여이를 수행 할 수도 있습니다.

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

예 :

https://jsfiddle.net/ar9fadd0/2/

편집 : 플렉스를 사용하여이 작업을 수행 할 수도 있습니다.

.pdf {
  display: flex;
}
.pdf:before {
  display: flex;
  align-items: center;
}

예 :

https://jsfiddle.net/ctqk0xq1/1/

---

더 깨끗한 접근 방식은 수직 정렬을 상속하는 것입니다.HTML에서 :

<div class="shortcut"><a href="#">Download</a></div>

그리고 CSS에서 :

.shortcut {
    vertical-align: middle;
}
.shortcut > a:after {
    vertical-align: inherit;
{

이렇게하면 아이콘이 모든 해상도 / 글꼴 크기 조합에서 제대로 정렬됩니다. 아이콘 글꼴과 함께 사용하기에 좋습니다.

---

line-height 속성을 엉망으로 만드는 것이 트릭을 수행해야합니다. 나는 이것을 테스트하지 않았으므로 정확한 값이 옳지 않을 수 있지만 1.5em으로 시작하고 정렬 될 때까지 0.1 단위로 조정하십시오.

.pdf{ line-height:1.5em; }

---

flexbox를 사용하면 나에게 트릭이 생겼습니다.

.pdf:before {
    display: flex;
    align-items: center;
    justify-content: center;
}

---

방금 꽤 깔끔한 해결책을 찾았다 고 생각합니다. 트릭은

line-height

이미지 (또는 모든 콘텐츠) 를 설정하는 것 입니다

height

. 본문 CSS 사용 :

div{
  line-height: 26px; /* height of the image in #submit span:after */
}

span:after{
    content: url('images/forward.png');
    vertical-align: bottom;
}

스팬 없이도 작동 할 것입니다.

---

I spent a good amount of time trying to work this out today, and couldn't get things working using line-height or vertical-align. The easiest solution I was able to find was to set the <a/> to be relatively positioned so it would contain absolutes, and the :after to be positioned absolutely taking it out of the flow.

a{
    position:relative;
    padding-right:18px;
}
a:after{
    position:absolute;
    content:url(image.png);
}

The after image seemed to automatically center in that case, at least under Firefox/Chrome. Such may be a bit sloppier for browsers not supporting :after, due to the excess spacing on the <a/>.

---

I had a similar problem. Here is what I did. Since the element I was trying to center vertically had height = 60px, I managed to center it vertically using:

top: calc(50% - 30px);

---

This is what worked for me:

.pdf::before {
    content: url('path/to/image.png');
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}

참고URL : https://stackoverflow.com/questions/2833027/vertically-aligning-css-before-and-after-content