CSSを使用してdivのすべての子を垂直方向にセンタリングするにはどうすればよいですか？ここで

Question

は私のコード

.header { 
 
     width: 100%; 
 
     height: 100px; 
 
     background: black; 
 
    } 
 
    
 
    .header .headerContainer { 
 
     position: relative; 
 
    \t top: 50%; 
 
     transform: translateY(-50%); 
 
     height: inherit; 
 
    } 
 
    
 
    img#logo { 
 
     height: 75%;  
 
    } 
 
    
 
    p#logotext { 
 
     color: white; 
 
     display: inline 
 
    }

<div class="header"> 
 
    <div class="headerContainer"> 
 
     <img src="https://cdn.worldvectorlogo.com/logos/react.svg" alt="Logo" id="logo" /> 
 
     <p id="logotext">Welcome To Here</p> 
 
    </div> 
 
</div>

であるが、これは適切に要素を合わせていません。

headerContainerが正しく配置されるようにCSSを変更するにはどうすればよいですか？

Answer 1

あなたはこれを解決するためにフレキシボックスを使用することができます。

.header { 
 
    background: black; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
.header .headerContainer { 
 
    align-items: center; 
 
    display: flex; 
 
    height: inherit; 
 
} 
 
img#logo { 
 
    height: 75%;  
 
} 
 
p#logotext { 
 
    color: white; 
 
    display: inline 
 
}

<div class="header"> 
 
    <div class="headerContainer"> 
 
     <img src="https://placehold.it/50x50" alt="Logo" id="logo" /> 
 
     <p id="logotext">Welcome To Here</p> 
 
    </div> 
 
</div>

だからあなたは垂直方向の中央にアイテムをpositionかtranformを使用する必要はありません。フレックスボックスについてもっと知りたければ、私はthis siteをお勧めします。

Answer 2

はあなたにもCSSグリッドを使用することができます。このコード

<style> 
.class{ 
Position:absolute; 
top:50%; 
left:50%; 
transform:rotateX(-50%,50%); 
} 
</style> 

Answer 3

を使用してください。

.header { 
 
    background: black; 
 
    height: 100% 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 
.header .headerContainer { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
} 
 
img#logo { 
 
    width: auto; 
 
    height: auto; 
 
    align-self: center; 
 
} 
 

 
p#logotext { 
 
    color: white; 
 
    align-self: center; 
 
}

<div class="header"> 
 
    <div class="headerContainer"> 
 
     <img src="http://via.placeholder.com/350x150" alt="Logo" id="logo" /> 
 
     <p id="logotext">Welcome To Here</p> 
 
    </div> 
 
</div>

Answer 4

近いので....あなただけのdispalyを配置する必要があります：曲げます。

.header { 
 
    background: black; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
.header .headerContainer { 
 
    align-items: center; 
 
    display: flex; 
 
    height: inherit; 
 
} 
 
img#logo { 
 
    height: 75%;  
 
} 
 
p#logotext { 
 
    color: white; 
 
    display: inline 
 
}