Solved

CSS Alignment

Posted on 2014-03-05
6
223 Views
Last Modified: 2014-03-05
Hi

I have may tags in a webpage, then i need to align a tag with respect to another. say h1 in respect with <p id="test">Test</p>, for example center h1 with respect to this p tag, any idea?
0
Comment
Question by:joyacv2
  • 3
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39906557
<style>
div{text-align:center;}
</style>
<div>
<h1>stuff</h1>
<p>more stuff</p>
</div>

Open in new window

0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39906559
Every tag has a particular default display trait which creates particular behavior for that tag (which can be changed with CSS.)  h tags (like div's) default to taking 100% of the available width, therefore if you set an h1 tag within a p tag you can simply set the h1 text-align attribute to center.

Example:

<p><h1 style="text-align: center;">Header Text</h1></p> 

Open in new window

0
 
LVL 1

Author Comment

by:joyacv2
ID: 39906851
Hi,

Is there no way to center dynamically in base to another tag width?, por example if i have a table that the width adjust dynamically, i want a p tag to center in reference to the table?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39907135
Of course there are ways of accomplishing what you desire.  One would be to set up a td within the table with a column-span attribute set to the number of columns within the table (so the td spans the entire width of the table) and set it's text-align property to center.  Then, to center the p tag, you would need to specify a fixed width to the p tag, and set its margin to "0 auto;".  The p tag will now be centered within the table.

Example:
<table><tr><td colspan="3" style="text-align: center;"><p style="width: 30px; margin: 0 auto;">Hi</p></td></tr><tr><td>Some text</td><td>Some text</td><td>Some text</td></tr></table>

Open in new window

0
 
LVL 1

Author Comment

by:joyacv2
ID: 39908017
hi,

the problem is that the p tag is not inside the table, this works if the p tag is inside the table, but in this case the p tag is in another location, any other idea?
0
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 500 total points
ID: 39908033
I am not understanding what it is you are doing.  First, you asked how to center an h1 tag within a p tag.  I told you how to do that.  Next you asked me how to center a p tag within a table, I told you how to do that.  Now you want to know how to center the p tag in another location?

First off, to center anything you need a containing element within which to center it.  The "text-align: center;" on the container with the fixed width, "margin: 0 auto;" on the contained element will work for most situations.  Generally the display for both elements needs to be something other than inline.  This will work, for example, by placing the p tag within a div like so:

<div style="text-align: center;"><p style="width: 30px; margin: 0 auto;">Hi</p></div>

Open in new window


Is this helpful?
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

840 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