development

텍스트 정렬 중심을 사용하는 중심 이미지?

big-blog 2020. 2. 13. 00:46
반응형

텍스트 정렬 중심을 사용하는 중심 이미지?

이 속성 text-align: center;은 CSS를 사용하여 이미지를 중앙에 배치하는 좋은 방법입니까?

img {
    text-align: center;
}

는 AS 즉 의지하지 작업 text-align속성은 컨테이너가 아닌 인라인 요소를 차단하도록 적용되며, img인라인 요소이다. W3C 사양을 참조하십시오 .

대신 이것을 사용하십시오 :

img.center {
    display: block;
    margin: 0 auto;
}
<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

항상 작동하지는 않습니다 ... 작동하지 않으면 다음을 시도하십시오.

img {
    display: block;
    margin: 0 auto;
}

나는 이 게시물을 보았고 그것은 나를 위해 일했다 :

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(수직 및 수평 정렬)

이를 수행하는 또 다른 방법은 주변 단락을 중심으로하는 것입니다.

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

넌 할 수있어:

<center><img src="..." /></center>

실제로 코드의 유일한 문제점은 text-align속성이 태그 내부의 텍스트 (예, 이미지는 텍스트로 계산 됨)에 적용된다는 것입니다. 당신은 넣어 싶은 span이미지 주위에 태그를 설정하고 그 스타일을 text-align: center이렇게 같이 :

span.centerImage {
     text-align: center;
}
<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

이미지가 중앙에 위치합니다. 질문에 대한 응답으로 이미지를 포함하는 span(또는 div)에 규칙을 적용하는 것을 기억하는 한 이미지를 중앙에 배치하는 가장 쉽고 확실한 방법 입니다.

내가 제안 할 수있는 요소를 가운데에 맞추는 세 가지 방법이 있습니다.

  1. text-align속성 사용

        .parent {
    text-align: center;
}
        <div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

  2. margin속성 사용

    img {
    display: block;
    margin: 0 auto;
}
    <img src="https://placehold.it/60/60" />

  3. position속성 사용

    img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}
    <div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

첫 번째와 두 번째 방법은 부모가 최소한 이미지만큼 넓은 경우에만 작동합니다. 이미지가 부모보다 넓 으면 이미지는 중앙에 유지되지 않습니다!

그러나 세 번째 방법은 좋은 방법입니다!

예를 들면 다음과 같습니다.

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}
<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

고대 버전의 Internet Explorer를 지원해야하는 경우에만 해당됩니다.

현대적인 접근 방식은 margin: 0 autoCSS에서 수행 하는 것입니다.

예 : http://jsfiddle.net/bKRMY/

HTML :

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS :

p.pic {
    width: 48px;
    margin: 0 auto;
}

여기서 유일한 문제 는 단락의 너비가 이미지의 너비와 같아야한다는 것 입니다. 단락에 너비를 넣지 않으면 물론 100 %로 가정하고 이미지를 왼쪽으로 정렬하기 때문에 작동하지 않습니다 text-align:center.

바이올린을 시험해보고 원하는 경우 실험 해보십시오.

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

이미지가있는 클래스를 사용하는 경우 다음이 수행됩니다.

class {
    display: block;
    margin: 0 auto;
}

특정 클래스의 이미지 만 가운데 정렬하려는 경우 다음을 수행하십시오.

class img {
    display: block;
    margin: 0 auto;
}

단순히 부모 정렬을 변경하십시오 :)

부모 속성에서 이것을 사용해보십시오.

text-align:center

당신이 사용할 수있는 text-align: center부모에와 변경 img에 display: inline-block그것은 따라서 텍스트 요소처럼 동작하고, 부모가 폭이있는 경우를 중심으로 될 것입니다 →!

img {
    display: inline-block
}

컨테이너 고정 이미지에서 CSS 3 Flexbox 를 사용 하여 이미지를 세로 및 가로로 완벽하게 중앙에 배치 할 수 있습니다 .

이미지 홀더로 <div class = "container">가 있다고 가정 해 봅시다.

그런 다음 CSS로 사용해야합니다.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

그리고 이것은이 div의 모든 콘텐츠를 완벽하게 중앙에 배치합니다.

div를 사용하여 이미지를 중앙 정렬합니다. 에서처럼 :

<div align="center"><img src="your_image_source"/></div>

이미지를 배경으로 설정하려면 해결책이 있습니다.

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

배경 이 아닌 이미지 를 중앙에 배치하는 것은 이미지를 인라인으로 표시할지 (기본 동작) 또는 블록 요소로 표시할지에 따라 다릅니다.

인라인의 경우

이미지의 표시 CSS 속성의 기본 동작을 유지하려면 설정해야하는 다른 블록 요소 안에 이미지를 래핑해야합니다. text-align: center;

블록의 경우

이미지를 자체 블록 요소로 간주하려면 text-align속성이 감지되지 않으므로 대신이 작업을 수행해야합니다.

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

귀하의 질문에 대한 답변 :

속성이 텍스트 정렬입니까? CSS를 사용하여 이미지를 중앙에 배치하는 좋은 방법은 무엇입니까?

예, 아니오

  • 예, 이미지가 래퍼 내부의 유일한 요소 인 경우
  • 아니요, 이미지의 형제 요소 인 모든 자식 요소가 text-align속성 을 상속하므로 이미지 래퍼 내에 다른 요소가있는 경우이 부작용이 마음에 들지 않을 수 있습니다.

참고 문헌

  1. 인라인 요소 목록
  2. 물건을 중심으로

확장하는 또 다른 방법-표시 :

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

이것을 imgCSS에 사용하십시오 .

img {
  margin-right: auto;
  margin-left: auto;
}

내가 찾은 가장 간단한 해결책은 이것을 img-element에 추가하는 것입니다.

style="display:block; margin: auto;"

다른 사람들이 제안한대로 "auto"앞에 "0"을 추가 할 필요가없는 것 같습니다. 어쩌면 이것이 올바른 방법 일지 모르지만 "0"없이도 내 목적에 충분하게 작동합니다. 최신 파이어 폭스, 크롬, 및에 적어도 가장자리 .

display: block와 함께 margin: 0작동하지 않았고 text-align: center요소로 포장하지 않았습니다 .

이것은 내 솔루션입니다.

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX 대부분의 브라우저에서 지원

에 이미지와 일부 텍스트가 있으면 텍스트와 이미지를 한 번에 정렬하는 데 div사용할 수 있음을 발견했습니다 text-align:center.

HTML :

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS :

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

코드 펜 : https://codepen.io/artforlife/pen/MoBzrL?editors=1100

때때로 우리는 페이지 내부의 WordPress 관리자에 직접 내용과 이미지를 추가합니다. 컨텐츠 안에 이미지를 삽입하고 그 중심을 정렬하려고 할 때. 코드는 다음과 같이 표시됩니다.

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

이 경우 다음과 같이 CSS 내용을 추가 할 수 있습니다.

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

사용하다:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

이것이 라 라벨 프레임 워크에서 이미지를 중앙에 맞추는 방법이라고 생각합니다.

참고 URL : https://stackoverflow.com/questions/7055393/center-image-using-text-align-center



반응형

'development' 카테고리의 다른 글

stdClass 유형의 객체를 배열로 사용할 수 없습니까?  (0) 2020.02.13
객체의 클래스를 결정하는 방법?  (0) 2020.02.13
파이프로“티”를 사용하는 동안 파일에 stderr를 쓰려면 어떻게해야합니까?  (0) 2020.02.12
.on ( 'click')과 .click ()의 ​​차이점  (0) 2020.02.12
Java String을 byte []로 변환하는 방법?  (0) 2020.02.12

'development'의 다른글

  • 현재글텍스트 정렬 중심을 사용하는 중심 이미지?

관련글

댓글

티스토리툴바