45799

working with css to align center

Question:

I have a html file with a div tag and some text in that tag. I want to adjust that text exactly middle of div and also div exactly middle of page for any resolution. I tried it with margin:0 auto then it appears top center, but vertically it does not appear in middle.

Answer1:

The div needs CSS like this, depending on the rest of your HTML:

margin-left: auto; margin-right: auto; text-align: center;

That will align the div in the centre of its container and align the text within it to the centre also.

Edit - I've just noticed you want to vertically centre the div too. There are lots of ways of doing this that a quick Google would show up, such as this method: <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow">http://www.jakpsatweb.cz/css/css-vertical-center-solution.html</a>

Answer2:

margin auto 0 will work only only you give width to your div. text-align:center will align text in the center.

Answer3:

maybe you can try this, <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow">http://www.jakpsatweb.cz/css/css-vertical-center-solution.html</a>

Answer4:

Here you are: <a href="http://jsfiddle.net/KcrvL/" rel="nofollow">http://jsfiddle.net/KcrvL/</a>.

Answer5:

To adjust your div use this code:

margin-left: auto; margin-right: auto;

And to make text in middle of div use this code:

text-align: center;

Answer6:

You have to set the container div with the css like this:

div{ margin: 0 auto; /*= the 0 sets the top and bottom margin to zero and the auto centers the div =*/ width: 940px; /*= the width is a must have but can be set to the size you need =*/ text-align: center; /*= use this if you want to center the text inside the div =*/ }

Recommend

  • Anybody have any idea how the divs are emitted in pinterest.com?
  • Creating a layer of gradient within an SVG path dynamically
  • Should I be afraid to use UDP to make a client/server broadcast talk?
  • CSS how to fix an element to scroll horizontally with the page but not vertically?
  • How do I translate LR(1) Parse into a Abstract syntax tree?
  • Ionic Slide Up Slide Down Animation for only one view in sidebar
  • Plotting densities in R
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • Update Google Maps traffic layer without page reloading
  • Git describe fails to return most recent annotated tag
  • How can I display the parent menu item's description using Wordpress walkers?
  • C# program and C++ DLL compiled for 32-bit system crash on 64-bit system
  • Authentication in Play! and RestEasy
  • Adjust width of select element according to selected option's width
  • jQuery ready not fired after rails link_to is clicked
  • Installing iPhone App to iPhone
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Bad request using file_get_contents for PUT request in PHP
  • Yii2: Config params vs. const/define
  • Disable Enter in editText android
  • Algorithm for a smudge tool?
  • Fetching methods from BroadcastReceiver to update UI
  • Modifying destination and filename of gulp-svg-sprite
  • How to check if every primary key value is being referenced as foreign key in another table
  • Symfony2: How to get request parameter
  • GridView Sorting works once only
  • Matrix multiplication with MKL
  • How to get icons for entities from eclipse?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • python regex in pyparsing
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • JTable with a ScrollPane misbehaving
  • Java static initializers and reflection
  • Change div Background jquery
  • JaxB to read class hierarchy