Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Alignment

Posted on 2014-03-05
6
Medium Priority
?
229 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 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

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.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

618 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