?
Solved

CSS Alignment

Posted on 2014-03-05
6
Medium Priority
?
227 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
[X]
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
  • 3
  • 2
6 Comments
 
LVL 53

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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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 2000 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 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