CSS Alignment

Posted on 2014-03-05
Last Modified: 2014-03-05

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?
Question by:joyacv2
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
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39906557
<p>more stuff</p>

Open in new window

LVL 17

Expert Comment

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.


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

Open in new window


Author Comment

ID: 39906851

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?
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

LVL 17

Expert Comment

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.

<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


Author Comment

ID: 39908017

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?
LVL 17

Accepted Solution

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?

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

707 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