ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingช่วยแก้ CSS ให้ทีครับ
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ช่วยแก้ CSS ให้ทีครับ  (อ่าน 1401 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ChilTunDer
ก๊วนเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 318



ดูรายละเอียด
« เมื่อ: 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 ต้องแก้ไขยังไงครับ
บันทึกการเข้า
rapiz
Newbie
*

พลังน้ำใจ: 13
ออฟไลน์ ออฟไลน์

กระทู้: 81



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 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>
บันทึกการเข้า
█ Web Hosting,Reseller Hosting ราคาถูกเริ่มต้นแค่ 200฿ ต่อปีเท่านั้น!
█ VPS Linux, Windows (*ฟรี Direct Admin*) เริ่มต้นแค่ 700฿ ต่อเดือนเท่านั้น
█ รับเขียน Application บน Windows, Linux ด้วยทีมงานมืออาชีพ!!
█ สนใจ สมัครบริการด้านบน http://www.rapizhost.com
█ ติดต่อ 091-7733660 (24ชม.) Line ID : @rapizhost
BakKheab
สมุนแก๊งเสียว
*

พลังน้ำใจ: 65
ออฟไลน์ ออฟไลน์

กระทู้: 725



ดูรายละเอียด
« ตอบ #2 เมื่อ: 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>
บันทึกการเข้า
killer777
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 52
ออฟไลน์ ออฟไลน์

กระทู้: 1,009



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 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;
}
บันทึกการเข้า
รับทำแอพ

แอพขายของออนไลน์

อาหารทะเล
MD.18
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 287
ออฟไลน์ ออฟไลน์

กระทู้: 3,008



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 01 กรกฎาคม 2016, 15:33:07 »
 Embarrassed ผ่านมา

ใช้ 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;}
บันทึกการเข้า
ติดต่อทางเมล์ [email protected] by ทวีศักดิ์  line : 0862600055

คิวงานว่าง !!
ch0k
สมุนแก๊งเสียว
*

พลังน้ำใจ: 111
ออฟไลน์ ออฟไลน์

กระทู้: 711



ดูรายละเอียด
« ตอบ #5 เมื่อ: 02 กรกฎาคม 2016, 09:21:55 »
test แค่ chrome กับ ff นะครับ

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


 Tongue
บันทึกการเข้า
รับดูแลเว็บไซต์ ทำเว็บไซต์ ร้านค้าออนไลน์
WordPress + WooCommerce
ดูแลให้ทั้งระบบ, Google Analytics + Campaign Tracking พร้อมรายงานการวิเคราะห์
yatard
ก๊วนเสียว
*

พลังน้ำใจ: 9
ออฟไลน์ ออฟไลน์

กระทู้: 237



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 02 กรกฎาคม 2016, 22:57:21 »
เก็บข้อมูลด้วยคน  wanwan017
บันทึกการเข้า
ราคารถมือสอง | เช็คราคารถมือสอง | รถยนต์มือสองราคาถูก
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: