Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Centering an Image help please.
New Posts  All Forums:Forum Nav:

Centering an Image help please.

post #1 of 15
Thread Starter 
I can't for the life of me center an image for my website.
I am an HTML/CSS novice.
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
post #2 of 15
Try this

http://www.w3schools.com/tags/att_img_align.asp
post #3 of 15
Thread Starter 
This is the exact website where i am getting my training from. Still not working.
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
post #4 of 15
Thread Starter 
actually nevermind...I'm going to start from scratch just using notepad instead of Dw CS5. Dw just made everything worse for me.
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
post #5 of 15
Horizontal centering:
CSS:
Code:
/* use the "." to denote it as a class. This allows the code to be reusable for multiple
 images on the page and is W3 compliant */
img.centered{
      Display: block;  /* This makes the image a block level element which allows the 
                                     margin property more or less be obeyed */
      margin: 0 auto;  /* Tells the file that there is a 0 margin top and bottom of 
                                  the image but auto margins left and right. This WILL center the image. */
}

HTML:
Code:
<img class="centered" alt=" " src="something.jpeg" />

sorry for weird formatting, not doing this in a normal text editor atm.
Edited by HalfWayCrook - 1/30/12 at 7:19pm
post #6 of 15
Thread Starter 
Now I am having problems inserting images. No idea how to use the "src" thing. So I right clicked an image to get the info in my pics folder and got the location, but nothing happened when I opened it in the browser.

Using notepad, I did the following to just figure out how to use an image:
Code:
<html>
<body>

<img style="center" src="C:\Users\My Name\Pictures\Computer(<-- which is the name of the photo)"/>

</body>
</html>


what went wrong?
Edited by ragtag7 - 1/30/12 at 8:08pm
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
post #7 of 15
Code:
C:\Users\My Name\Pictures\Computer\<insert actual file name and extension here>
post #8 of 15
Try using "alignment" instead of "style"
BlueRaven
(13 items)
 
Dead BIOS
(9 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 G74Sx NVIDIA GeForce GTX 560M  Samsung  
RAMRAMHard DriveHard Drive
Samsung  Samsung  Momentus 7200.4 Scorpio Blue 
Mouse
Logitech G700 
  hide details  
Reply
BlueRaven
(13 items)
 
Dead BIOS
(9 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 G74Sx NVIDIA GeForce GTX 560M  Samsung  
RAMRAMHard DriveHard Drive
Samsung  Samsung  Momentus 7200.4 Scorpio Blue 
Mouse
Logitech G700 
  hide details  
Reply
post #9 of 15
Thread Starter 
Computer IS the name of the picture and the extension is jpg and it didn't work.
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
The Beginning.
(18 items)
 
Work Test Machine
(10 items)
 
Toshi
(12 items)
 
CPUMotherboardGraphicsRAM
FX-8120 GA-990FXA-UD3 Sapphire Tri-X R9 290X 8GB GDDR5 OC Edition 16GB G.Skill 2133Mhz 
Hard DriveHard DriveHard DriveHard Drive
Seagate 500GB 7200rpm 6Gb/s Seagate 1TB 7200rpm 6Gb/s Samsung 850 PRO 256GB Seagate 2TB 7200rpm 6Gb/s 
Optical DriveCoolingOSMonitor
Sony Optiarc Corsair H60 Win7HP64bit/Ubuntu 14.04LTS HP 2310m 1080p @60Hz 
KeyboardPowerCaseMouse
Razer BlackWidow Ultimate Seasonic X750 Gold Cooler Master Storm Stryker Razer Mamba 2012 
Mouse PadAudio
Razer Destructor 2 BF4 Edition Creative Sound Blaster Zx 
CPUMotherboardGraphicsRAM
Intel Core i5 4690k GA-Z97-HD3 MSI HD7950 3GBGDDR5 OC Twin Frozr edition 12GBs G.SKILL 
Hard DriveOptical DriveOSPower
Seagate 500GB 7200RPM  DELL Generic Windows 10 Professional 64bit / Mint 17.3 64bit Seasonic x650 
CaseAudio
Cooler Master Elite 430 Realtek 
CPUMotherboardGraphicsRAM
AMD A8-6410 Toshiba something idk. AMD R5 1GBGDDR5 16GB 
Hard DriveOptical DriveOSMonitor
250GB Samsung 850 SSD Toshiba DVD-RW Windows 10 Pro Terrible. 
KeyboardPowerMouseAudio
Disgusting. Ok. Toshiba Trackbad with horrible buttons. Realtek 
  hide details  
Reply
post #10 of 15
Make a folder called HTML and put all the HTML files you made in it. Now put the picture in that same folder. Say it was called "computer" it would just be
Code:
<img src="computer.jpg" width="" height="" alt="" value="">

tongue.gif
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Centering an Image help please.