You can apply this CSS to the inner <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width
to 50%
. Any width less than the containing <div>
will work. The margin: 0 auto
is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width
.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
EDIT
With flexbox
it is very easy to style the div horizontally and vertically centered.
#inner {
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%;
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
To align the div vertically centered, use the property align-items: center
.
I use javascript:void(0)
.
Three reasons. Encouraging the use of #
amongst a team of developers inevitably leads to some using the return value of the function called like this:
function doSomething() {
//Some code
return false;
}
But then they forget to use return doSomething()
in the onclick and just use doSomething()
.
A second reason for avoiding #
is that the final return false;
will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.
A third reason is that there are cases where the onclick
event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick
(or on anything) in HTML markup look like this:
onclick="someFunc.call(this)"
OR
onclick="someFunc.apply(this, arguments)"
Using javascript:void(0)
avoids all of the above headaches, and I haven't found any examples of a downside.
So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:
Use href="#"
, make sure onclick
always contains return false;
at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick
property make sure that as well as not throwing an error it returns false
.
OR
Use href="javascript:void(0)"
The second is clearly much easier to communicate.
Best Answer
You can't disable a link (in a portable way). You can use one of these techniques (each one with its own benefits and disadvantages).
CSS way
This should be the right way (but see later) to do it when most of browsers will support it:
It's what, for example, Bootstrap 3.x does. Currently (2016) it's well supported only by Chrome, FireFox and Opera (19+). Internet Explorer started to support this from version 11 but not for links however it's available in an outer element like:
With:
Workaround
We, probably, need to define a CSS class for
pointer-events: none
but what if we reuse thedisabled
attribute instead of a CSS class? Strictly speakingdisabled
is not supported for<a>
but browsers won't complain for unknown attributes. Using thedisabled
attribute IE will ignorepointer-events
but it will honor IE specificdisabled
attribute; other CSS compliant browsers will ignore unknowndisabled
attribute and honorpointer-events
. Easier to write than to explain:Another option for IE 11 is to set
display
of link elements toblock
orinline-block
:Note that this may be a portable solution if you need to support IE (and you can change your HTML) but...
All this said please note that
pointer-events
disables only...pointer events. Links will still be navigable through keyboard then you also need to apply one of the other techniques described here.Focus
In conjunction with above described CSS technique you may use
tabindex
in a non-standard way to prevent an element to be focused:I never checked its compatibility with many browsers then you may want to test it by yourself before using this. It has the advantage to work without JavaScript. Unfortunately (but obviously)
tabindex
cannot be changed from CSS.Intercept clicks
Use a
href
to a JavaScript function, check for the condition (or the disabled attribute itself) and do nothing in case.To disable links do this:
To re-enable them:
If you want instead of
.is("[disabled]")
you may use.attr("disabled") != undefined
(jQuery 1.6+ will always returnundefined
when the attribute is not set) butis()
is much more clear (thanks to Dave Stewart for this tip). Please note here I'm using thedisabled
attribute in a non-standard way, if you care about this then replace attribute with a class and replace.is("[disabled]")
with.hasClass("disabled")
(adding and removing withaddClass()
andremoveClass()
).Zoltán Tamási noted in a comment that "in some cases the click event is already bound to some "real" function (for example using knockoutjs) In that case the event handler ordering can cause some troubles. Hence I implemented disabled links by binding a return false handler to the link's
touchstart
,mousedown
andkeydown
events. It has some drawbacks (it will prevent touch scrolling started on the link)" but handling keyboard events also has the benefit to prevent keyboard navigation.Note that if
href
isn't cleared it's possible for the user to manually visit that page.Clear the link
Clear the
href
attribute. With this code you do not add an event handler but you change the link itself. Use this code to disable links:And this one to re-enable them:
Personally I do not like this solution very much (if you do not have to do more with disabled links) but it may be more compatible because of various way to follow a link.
Fake click handler
Add/remove an
onclick
function where youreturn false
, link won't be followed. To disable links:To re-enable them:
I do not think there is a reason to prefer this solution instead of the first one.
Styling
Styling is even more simple, whatever solution you're using to disable the link we did add a
disabled
attribute so you can use following CSS rule:If you're using a class instead of attribute:
If you're using an UI framework you may see that disabled links aren't styled properly. Bootstrap 3.x, for example, handles this scenario and button is correctly styled both with
disabled
attribute and with.disabled
class. If, instead, you're clearing the link (or using one of the others JavaScript techniques) you must also handle styling because an<a>
withouthref
is still painted as enabled.Accessible Rich Internet Applications (ARIA)
Do not forget to also include an attribute
aria-disabled="true"
together withdisabled
attribute/class.