I don't know how to align text under an image using CSS

Page 1 of 1

8 Replies - 2617 Views - Last Post: 15 July 2013 - 08:37 AM

#1 Adriel16  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 21-May 13

I don't know how to align text under an image using CSS

Posted 29 June 2013 - 01:27 AM

Posted 4 minutes ago
Hi I'm new to HTML and CSS and Javascript. I'm looking to start a business and I want to make a website for the business to save money. I have been able to align the image to the center of the page; however, I'm having trouble figuring out how to align the text vertically under the image. This my html.

HTML MARKUP
<body>

  <img src = "cleangarage.jpg"

    height = "240"

    width  = "380" />

<ul>

  <li><a href = "myFirst.html"><Home></li>

  <li><a href = "About.html"><About Us></li>

</ul>
</body>


CSS
[code]
<style type = "text/CSS">

  img {

   position: absolute;

   top: -689; bottom: 0; left: 0; right: 0;

   float: center;

   width: 50%

   clear: both;

   margin: auto;

  }

   

  ul li {

    text-align: center;

    width: 240;

    height: 380;

  }
</style>


I have tried other methods that have not worked including div. In another forum it was suggested to use "span"; however, I don't know how to use it.

Is This A Good Question/Topic? 0
  • +

Replies To: I don't know how to align text under an image using CSS

#2 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 71
  • Joined: 04-June 13

Re: I don't know how to align text under an image using CSS

Posted 29 June 2013 - 01:37 AM

Under the img css, there is no float: center. You need to use this instead:
Margin-left:auto;
Margin-right:auto;


And how do you want it aligned vertically under the image? Like a certain number of pixels down from it?
Was This Post Helpful? 0
  • +
  • -

#3 Adriel16  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 21-May 13

Re: I don't know how to align text under an image using CSS

Posted 29 June 2013 - 01:53 AM

View Posttravesty, on 29 June 2013 - 01:37 AM, said:

Under the img css, there is no float: center. You need to use this instead:
Margin-left:auto;
Margin-right:auto;


And how do you want it aligned vertically under the image? Like a certain number of pixels down from it?



yes exactly, so the image would be up top and the text vertically at the bottom just separated a little bit from the image.
Was This Post Helpful? 0
  • +
  • -

#4 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 71
  • Joined: 04-June 13

Re: I don't know how to align text under an image using CSS

Posted 29 June 2013 - 02:08 AM

You could try putting a div around the text.
<div id="text">
<ul>
  <li><a href = "myFirst.html"><Home></li>
  <li><a href = "About.html"><About Us></li>
</ul>
</div>


Then in the css part
#text {
width: 240;
margin-left: auto;
margin-right: auto;
top: x;  /* adjust this */
}

This post has been edited by travesty: 29 June 2013 - 02:09 AM

Was This Post Helpful? 0
  • +
  • -

#5 Adriel16  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 21-May 13

Re: I don't know how to align text under an image using CSS

Posted 29 June 2013 - 02:16 AM

It helped to center it but not vertically but it is a step in the right direction! Thank you! I'll see how I can put it vertically myself or else i'll never learn! Thank you again!
Was This Post Helpful? 0
  • +
  • -

#6 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 71
  • Joined: 04-June 13

Re: I don't know how to align text under an image using CSS

Posted 29 June 2013 - 02:24 AM

You could try "margin-top: x:" instead of just "top: x;

Also make sure to use "px" after all your measurements done in pixels. For example
top: -689px; bottom: 0px; left: 0px; right: 0px;

Was This Post Helpful? 0
  • +
  • -

#7 Leticia Wren  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 18
  • Joined: 05-July 13

Re: I don't know how to align text under an image using CSS

Posted 08 July 2013 - 11:09 PM

yes margin top: x can solve your problem and give you desired results.
Was This Post Helpful? 0
  • +
  • -

#8 Leticia Wren  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 18
  • Joined: 05-July 13

Re: I don't know how to align text under an image using CSS

Posted 14 July 2013 - 11:09 PM

yes its better to put div around the text and use margin top: x and margin right to solve your problem.
Was This Post Helpful? 0
  • +
  • -

#9 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: I don't know how to align text under an image using CSS

Posted 15 July 2013 - 08:37 AM

There is no reason to be using absolute positioning for your image just to center it, this can cause a lot of problems the further you develop your site. All you need to do is this.

<div>
    <img src="source.jpg">
    <p>Title</p>
</div>

CSS:
img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}



p {
    text-align: center;
}


Hold my horses, I jumped ahead of myself. If you want to center the text in your UL, try this:
ul {
    text-align: center;
    list-style-type: none;
}
li {
    display: inline-block;
}

This post has been edited by FerretHolmes: 15 July 2013 - 08:43 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1