[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 281
  • Last Modified:

HTML image center

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
Hiroyuki Tamura
Asked:
Hiroyuki Tamura
  • 4
  • 3
3 Solutions
 
erikTsomikSystem Architect, CF programmer Commented:
there number of may to do this.

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

or
<div align="center"><img src=""></div>
0
 
Hiroyuki TamuraAuthor Commented:
thank you.
if i want to make any blank space between the corner of the window, what should i do?
0
 
erikTsomikSystem Architect, CF programmer Commented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Hiroyuki TamuraAuthor Commented:
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
 
erikTsomikSystem Architect, CF programmer Commented:
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
 
Hiroyuki TamuraAuthor Commented:
thank you.
http://datapro.homeip.net/usone/
do you know how to align the image vertically center?
0
 
Hiroyuki TamuraAuthor Commented:
thank you.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now