How to verify if a label or element is center aligned on web page using javascript

Question

In order to verify if an element is aligned center, I was trying to get CSS property/values of the element. I am entirely a newbie to javascript, so I would like to seek your help in fetching the css property in order to verify text alignment using javascript.

Are you using [jQuery](http://jquery.com/)? That will make that easier. — Justin Chmura, Feb 21 '13 at 14:59
Hi Justin, no i never used jQuery.So i am not sure about it. What api in jQuery or Javascript to use in order to verify the alignment. — Sammy, Feb 21 '13 at 15:01

score 0 · Answer 1 · edited Feb 21 '13 at 15:36

0

If you mean vertical alignment - you can't, no such thing exists outside tables.

If you want to get the horizontal alignment you can use 'text-align'.

document.getElementById('idOfElement').style.textAlign will return the alignment 'left', 'right', 'center', 'justify' etc.

Its even simpler with jQuery: $('#idOfElement').css('text-align'); will return the same. but for jQuery to work you need to include the script here

edited Feb 21 '13 at 15:36

Akshay Khandelwal

1,570
11
19

answered Feb 21 '13 at 15:01

Martin

461
2
9

Although you are right by saying that no such thing exists outside table but you can always find Offset and by simple calculations you can decide where exactly the element is positioned within the DOM. – Akshay Khandelwal Feb 21 '13 at 15:36
True, but it's still not 'aligned' :) – Martin Feb 21 '13 at 15:46
So I think you have to go for the harder way. Which is calculate the Window width and height and then calculate the offset for the container and its width height and reset the offset then.. – Akshay Khandelwal Feb 21 '13 at 16:30

score 0 · Answer 2 · edited May 23 '17 at 11:49

Take a look at jQuery offset()

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.

Combined with documentation found

You'll be able to achieve your goal of verifying if an element is aligned (postitionned) center.

For your other point of verify text alignment using javascript :

if ($('#yourElement').css('text-align') == 'center')
{
   // true
}

Carry on

How to verify if a label or element is center aligned on web page using javascript

2 Answers2