이 수직 정렬 div를 오른쪽으로 정렬하는 방법은 무엇입니까?

debugcn 에 게시 Dev

rraallvv

다음과 같은 약정이 있습니다.

<style>
    .title {
      background: red;
    }
    .outer {
      display: inline-block;
      border: 1px solid red; 
      background: green;
    }
    .inner {
      display: inline-block;
      vertical-align: middle;
    }
    .left {
      background: yellow; 
    }
    .right {
      background: cyan; 
    }
</style>

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>2</div>
  </div>
</div>

클래스 right가 오른쪽에 정렬되도록 div를 어떻게 만들 수 있습니까?

결과는 http://www.cssdesk.com/uCmVL 에서 볼 수 있습니다 .

편집하다

두 개의 내부 div는 수직 정렬을 유지해야합니다. 즉vertical-align: whatever;

편집 2

레이아웃이 다소 복잡하고 변환을 사용하여 확대 및 축소 top: 50%; transform: translateY(-50%);하고 내부 클래스에서 시도했지만 SVG PATH 요소를 배치하기 위해 계산을 중단합니다

Zsawaf

flexbox로 많은 일을 할 수 있습니다. 찾고있는 레이아웃의 예는 다음과 같습니다.

.main-container {
  background-color: #eee;
}
h1 {
  text-align: center;  
}
.columns {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.red {
  background-color: #f00;  
}

.blue {
  background-color: #f99;  
}

<div class="main-container">
  <h1>Title</h1>
  <div class="columns">
    <div class="column red">
      <p>First Row</p>
      <p>Second Row</p>
      <p>Third Row</p>
    </div>
    <div class="column blue">
      <p>Centered First Row</p>
      <p>Centered Second Row</p>
    </div>
  </div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-12

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

이 수직 정렬 div를 오른쪽으로 정렬하는 방법은 무엇입니까?

이 수직 정렬 div를 오른쪽으로 정렬하는 방법은 무엇입니까?

이미지를 수직으로 정렬하는 방법은 무엇입니까?

행의 오른쪽으로 테이블의 이미지를 정렬하는 방법은 무엇입니까?

React에서 아이콘과 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

이 스팬 요소를 수직으로 정렬하는 방법은 무엇입니까?

글리프를 수직으로 정렬하는 방법은 무엇입니까?

소셜 미디어 아이콘을 왼쪽에 수직으로 정렬하는 방법은 무엇입니까?

본문에서 div를 수직으로 정렬하는 방법은 무엇입니까?

<div> 안에 <nav>를 수직으로 정렬하는 방법은 무엇입니까?

참조 된 뷰를 수직으로 쌓고 수평으로 정렬하는 Flow 가상 레이아웃을 정의하는 방법은 무엇입니까?

이미지가 포함 된 div에서 링크를 수직으로 정렬하는 방법은 무엇입니까?

하나의 정렬 변수로 정렬 된 개체의 데이터 구조를 정렬하는 가장 좋은 방법은 무엇입니까?

이 정보를 파이썬에서 좋은 형식 (수직 정렬)으로 인쇄하는 방법은 무엇입니까?

div를 iframe 오른쪽에 정렬하는 방법은 무엇입니까?

동적 치수가있는 래퍼 div에서 맨 왼쪽, 맨 오른쪽 및 절대 중앙에 3 개 div를 수직으로 가운데 정렬하는 방법은 무엇입니까?

절대 위치없이 CSS에서 DIV를 오른쪽 또는 왼쪽 또는 가운데로 정렬하는 방법은 무엇입니까?

중앙 정렬 div를 수직 및 수평으로 만드는 방법은 무엇입니까?

디스플레이 테이블 셀을 사용하여 상자를 수평 (및 수직)으로 정렬하는 방법은 무엇입니까?

플렉스 랩이 트리거 될 때 오른쪽으로 정렬하는 방법은 무엇입니까?

Material-UI를 사용하여 기본 및 보조 텍스트를 수직이 아닌 수평으로 정렬하는 방법은 무엇입니까?

CKStackLayoutComponent를 사용하여 두 레이블을 수평으로 정렬하는 방법은 무엇입니까?

div에서 링크와 버튼을 수직으로 정렬하는 방법은 무엇입니까?

동적으로 생성 된 뷰를 수직으로 정렬하는 방법은 무엇입니까?

CSS를 사용하여 사이드 바를 오른쪽에 정렬하는 방법은 무엇입니까?

회전 된 이미지 캡션을 수직으로 정렬하는 방법은 무엇입니까?

내 소셜 미디어 아이콘을 수직으로 정렬하는 방법은 무엇입니까?

bootstrapTable : 세부 아이콘을 수직으로 정렬하는 방법은 무엇입니까?

A의 왼쪽이 B의 중앙에 수직으로 정렬되도록 버튼 A를 버튼 B 아래에 놓는 방법은 무엇입니까?

Oracle에서 데이터를 맨 아래 대신 오른쪽으로 정렬하는 방법은 무엇입니까?

여러 div를 왼쪽에 세로로 정렬하고 하나의 큰 div를 오른쪽에 정렬하는 방법은 무엇입니까?