New design tool features…

by

These new features are so cool, I just have to cross post here in the Tech Blog! Line things up accurately…check! Space things out evenly…check! Follow the link for details…

Please form an evenly spaced single line

To keep things on the tech topic, here’s a little CSS tip on how to center a block element inside another block element. Here’s a CSS class:

.centerme {
  margin-left: auto;
  margin-right: auto;
  width: 140px;
}

And here’s the HTML:


<div style="width: 400px">
<div class="centerme">This is text inside a DIV tag.</div>
</div>

The idea here is that we are setting the left and right margins of the parent DIV to be equal (auto), and the inner DIV, with a width of 140px, automatically gets centered. Neat.

Tags: , ,

3 Responses to “New design tool features…”

  1. azac Says:

    I really like the align tool. It has really come in handy and I find myself using it a lot. This is perfect for those that aren’t satisfied with just “eyeballing” certain elements into place and takes all the guess work out of it, guaranteeing evenly spaced items.

  2. jillcatrina Says:

    It is very nice CSS tips. I know some details about How to Align Text: To align text within a normal block of text such as a paragraph or a blockquote, use the text-align property. Left, right and center aligned text Left, right and center aligned text The value choices for the test-align property are left, right, center and justify. Since justified text is not very readable on the Web, the illustration only shows left, right and center. In this illustration, each paragraph has a black border to demonstrate the size of the block element on the page if no set width is applied to the element.
    ——————————————————————-
    jillcatrina

    Social Bookmarking Now

  3. Marc Says:

    Does Anyone know how to stretch a picture up/down and while keeping the same width? I’m trying to put a pic on a skateboard and when I pull the tabs to resize it, the whole pic gets bigger. HELP !?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 672 other followers

%d bloggers like this: