ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: ChilTunDer ที่ 30 มิถุนายน 2016, 23:04:10


หัวข้อ: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: ChilTunDer ที่ 30 มิถุนายน 2016, 23:04:10
โค๊ด:
<!DOCTYPE html>
<html>
	<head>
		<style>
			img {
				display: block;
				max-width: 100%;
				left: 50%;
				right: 50%;
				top: 50%;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img src="./images/progress.gif">
	</body>
</html>

จาก code ด้านบน ผมอยากจัดรูปให้อยู่กึ่งกลางของทุก Browser และทุก Device ต้องแก้ไขยังไงครับ

หัวข้อ: Re: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: rapiz ที่ 30 มิถุนายน 2016, 23:22:54
<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            display: block;
            max-width: 100%;
            left: 50%;
            right: 50%;
            top: 50%;
            position: absolute;
         }
         img.imcentered {
            display: block;
            margin: 0 auto;
         }
      </style>
   </head>
   <body>
      <img class="imcentered" src="./images/progress.gif">
   </body>
</html>


หัวข้อ: Re: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: BakKheab ที่ 30 มิถุนายน 2016, 23:56:25
<!DOCTYPE html>
<html>
   <head>
      <style>
         .imgWrapper{
            width:150px;
            margin:0 auto;
            text-align:center;
         }
         .imgWrapper img{
            width:150px;
         }
      </style>
   </head>
   <body>
      <div class="imgWrapper">
         <img src="image.png"/>
      </div>
   </body>
</html>

หัวข้อ: Re: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: killer777 ที่ 01 กรกฎาคม 2016, 12:29:54
กลางซ้ายขวา  และ  กลางบนล่างด้วยไหมครับ
 vertically center

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

หัวข้อ: Re: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: MD.18 ที่ 01 กรกฎาคม 2016, 15:33:07
 :-[ ผ่านมา

ใช้ flexbox ก็น่าจะง่ายครับ
โค๊ด:
<body>
<div id="box">
	<div class="flex-container">
		<div class="flex-item">
			Center
		</div>
	</div>
</div>	
</body>
css
โค๊ด:
body{width:100%;margin:0 auto;}
#box{float:left;width:100%;height:100%;position:absolute;top:0;left:0;display:table-cell;background:#f5f5f5;}
.flex-container {
width:100%;height:100%;display:flex;overflow:hidden;
-webkit-align-items:center;align-items:center;
-webkit-justify-content:center;justify-content:center;
}
.flex-item {text-align:center;padding:1%;border:1px solid #000;}

หัวข้อ: Re: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: ch0k ที่ 02 กรกฎาคม 2016, 09:21:55
test แค่ chrome กับ ff นะครับ

โค๊ด:
		img {
			position: absolute;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}


 :P

หัวข้อ: Re: ช่วยแก้ CSS ให้ทีครับ
เริ่มหัวข้อโดย: yatard ที่ 02 กรกฎาคม 2016, 22:57:21
เก็บข้อมูลด้วยคน  :wanwan017:


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com