한 페이지 웹 사이트를 만들려고합니다. 아이디어는 각 이미지에 대해 div를 갖는 것입니다 (부트 스트랩 사용). 이렇게하면 div에 대한 배경 이미지가 생성됩니다. 그런 다음 텍스트 및 기타 이미지를 배치 할 수있는 곳에 다른 div를 배치하고 싶습니다. 맨 위에서 위치를 사용하여 작동하도록 관리했지만 div에 상대적인 치수를 사용하여 더 작은 크기에 표시 될 때 화면 중앙 div의 콘텐츠는 여전히 중앙이고 적절한 크기로 설정됩니다.
다음은 div입니다.
<div class="row" id="homeRow">
<img id="homeImage" src="imageSource" alt="Example">
<div class="col-md-8 col-md-offset-2" id="homeTitle">
<img src="headingSource" alt="Handwriting Fonts">
<h3>Some content</h3>
</div>
</div>
페이지에 세 가지가 있습니다. 현재 내 CSS는 다음과 같습니다.
#homeRow{
height: 800px;
width: 100%;
color: white;
overflow:hidden;
}
#homeImage{
width: 100%;
position: relative;
-webkit-filter:brightness(60%);
-moz-filter:brightness(60%);
filter: url(#brightness);
filter:brightness(60%);
}
#homeTitle{
position: absolute;
top: 300px;
width: 50%;
font-family: Verdana, Geneva, sans-serif;
}
그래서 나는 행 div를 기준으로 행 div 내부의 모든 것을 배치 할 수있는 솔루션을 찾고 있습니다.
#homerow{
...
position: relative; // add this
}
#homeTitle{
...
//width:50% - remove this
left:25%; // add this
right:25%; // add this
// those left and right will make width 50% and centered
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다