?
Solved

CSS Alignment

Posted on 2014-03-05
6
Medium Priority
?
232 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 54

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

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.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

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