webkit-box ? 이게 뭔지...박스 위치를 좌측상단으로 위치이동
본문
COMPANY 모바일 테마 index중에 아래 소스가 있는데요
이 푸른색 박스가 항상 정중앙에 있는데요, 좌측 상단쪽에 나오게끔 하려고 합니다.
좌측상단 기준으로 50px,50px 떨어진 곳에서 나오도록 하려면 어떻게 해야할지..어렵네요...
.swiper-container .bn_txt 클래스에서 조정하는건지요?
도움좀 부탁드려요.ㅠ..
/*메인이미지 */
.swiper-container {width: 100%;height:500px;}
.swiper-slide {background:url(../img/main_bg1.jpg) no-repeat 50% 50%; background-size: cover;height:500px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-container .bn_txt{background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:250px; height:200px;padding:25px;color:#fff}
.swiper-container .bn_txt h2{text-shadow: 0 1px 1px rgba(0, 0, 0, .3);color:#fff;font-size:2.4em;line-height:40px;margin-top:10px}
.swiper-container .bn_txt p{color:#fff;background:url(../img/bn_pbg.jpg) no-repeat top left;padding-top:20px;margin-top:20px ;font-size:1.34em;line-height:23px;}
.swiper-container .swiper-pagination-bullet{opacity:1;border-radius:0;margin:0 !important;border:none;text-indent:-9999px;width:48px;height:4px;background:#3e3c52;overflow:hidden;display:inline-block;margin:0 ; zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
.swiper-container .swiper-pagination-bullet-active{background:#3d96d6}
답변 1
원하는 박스의 클래스명에 해당되는 CSS에서
{ position:relative; top:50px; left:50px; }
를 추가하세요
webkit-box 는 정렬방식을 조절하는 css의 옵션값입니다.
답변 감사합니다... 변화가 없는데요 .
여기에다 추가하는게 맞는건가요?
.swiper-container .bn_txt{position:relative; top:50px; left:50px;background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:150px; height:100px;padding:15px;color:#fff;left:0;top:0;}
@초심자 실제 사이트를 안보고
CSS만 보고 판단이 불가합니다.
제가 말씀드린건 기본적인 위치변경에 대한 CSS 입니다.
실제 제작을 하다보면
다른 CSS에 영향을 받을수도 있는 사항이라
실 샘플을 보고 확인해야 합니다.
