티스토리 뷰

VUEJS

VUEJS) tailwindcss 중앙정렬

Programmers 2021. 7. 22. 08:11
반응형

1.

<template>
   <div class="lg:w-full w-full bg-blue-0">
       <div class="xxx_imgWrap flex flex-col my-auto items-center mx-3">
          <div class="flex h-screen">
             <div class="m-auto">
                <img src="assets/device/xxxxx.png" width="140">
             </div>
          </div>
       </div>
   </div>
</template>
          
<script scoped>
.xxx_imgWrap {
  background: #2b324c;
  height: 226px;
  border: 1px solid #3c3e64;
}
</script>

 

 

2.

<template>
	<div class="lg:w-1/3 w-d h-full lg:flex lg:float-left">
        <div class="lg:w-1/3 w-full bg-blue-0 xxxx-bg flex flex-wrap content-center">
            <div class="m-auto w-100">
                <img src="assets/device/xxxxx.png">
            </div>
        </div>
    </div>
</template>     
               
                
<style scope>
.xxxx-bg {
  background: #2b324c;
  margin-right: 10px;
  border: 1px solid #3c3e64;
  border-radius: 10px;
}
</style>

반응형
댓글
공지사항