Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

HTML image center

Posted on 2009-05-15
7
265 Views
Last Modified: 2012-06-21
how do i show an image always come center?
one html page has one image always come center.
and if i need to show text over image, how do i do it?
0
Comment
Question by:Hiroyuki Tamura
  • 4
  • 3
7 Comments
 
LVL 19

Accepted Solution

by:
erikTsomik earned 125 total points
ID: 24397192
there number of may to do this.

<center><img src=""></center>

or
<div align="center"><img src=""></div>
0
 

Author Comment

by:Hiroyuki Tamura
ID: 24397201
thank you.
if i want to make any blank space between the corner of the window, what should i do?
0
 
LVL 19

Assisted Solution

by:erikTsomik
erikTsomik earned 125 total points
ID: 24397270
just add CSS. add id to the div
<style type="text/css">
#newLine{margin:10px;padding:10px;}

</style>

<div id="newLine" align="center"><img src=""></div>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:Hiroyuki Tamura
ID: 24397306
thank you.
if i have a link on the page, how do i make it?
should i do text over image and make link or use div to make a link over image?
i want to try text over image but i don't know how.
noname.jpg
0
 
LVL 19

Assisted Solution

by:erikTsomik
erikTsomik earned 125 total points
ID: 24397342
for example you have this
<div class="image">
  <img alt="" src="http://www.kavoir.com/img/text-over-image.jpg" />
  <div class="text">
    <p>test1.</p>
    <p>text2</p>
  </div>
</div>

Then you just add css to the <head> and it should work
.image {
      position:relative;
      float:left; /* optional */
}
.image .text {
      position:absolute;
      top:10px; /* in conjunction with left property, decides the text position */
      left:10px;
      width:300px; /* optional, though better have one */
}
0
 

Author Comment

by:Hiroyuki Tamura
ID: 24414839
thank you.
http://datapro.homeip.net/usone/
do you know how to align the image vertically center?
0
 

Author Closing Comment

by:Hiroyuki Tamura
ID: 31581988
thank you.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question