-2
.alert{
    color:#555;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    padding:10px 10px 10px 36px;
    margin:10px;
    min-width: 500px;
    position: fixed;
    display: block;
}

How would I go about centering this on the screen without using a set starting width?

Kryptos
  • 542
  • 2
  • 8
  • 18

4 Answers4

1

There are a lot of ways to center the element. In your case apply the following css:

.alert{
/*add this rules*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*upto this*/
  color:#555;
  border-radius:10px;
  font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
  padding:10px 10px 10px 36px;
  margin:10px;
  min-width: 500px;
  position: fixed;
  display: block;
}

Also, have a look at centering tricks here and here

The link you shouldn't remember. Just google about centering tricks , then you'll have a lot of articles about them. Please do a research next time before you ask the question.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
0

Here's how you can do it, add this:

.alert{
     top: 50%;
     left: 50%;   
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

Check it out here: JSFiddle

Johan Karlsson
  • 6,419
  • 1
  • 19
  • 28
0
margin:0 auto 0 auto;

use this code

sia
  • 513
  • 4
  • 14
-1

Wrap the alert with a parent div and set it to text-align: center;.

HTML

<div class="alert-wrap">
    <div class="alert">My Alert Message!</div>
</div>

Then set .alert to display: inline-block; and remove position: fixed;

CSS

.alert-wrap {
    text-align: center;
}

.alert {
    color:#555;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    padding:10px 10px 10px 36px;
    margin:10px;
    min-width: 500px;
    display: inline-block;
}

Working Example: http://jsfiddle.net/tahrmzLz/

Axel
  • 10,732
  • 2
  • 30
  • 43
  • This doesn't work and you've removed `position: fixed` in your jsFiddle example above. – Fahad Hasan Oct 27 '14 at 20:56
  • @Danko - That was a part of the original code and I've updated my answer to remove it. Also I've provided a working JSfiddle proving in fact my solution does work. – Axel Oct 27 '14 at 20:58
  • I think that the `position: fixed` is a requirement of his CSS since it's an alert box and the OP would want it to always appear at the top and in that case your code won't work. – Fahad Hasan Oct 27 '14 at 21:02
  • That is your own assumption. I answer the question based on his own words "How would I go about centering this on the screen without using a set starting width?". For this, my solution answers the question and it works as proven with the JSfiddle. – Axel Oct 27 '14 at 21:03
  • Also, there are several other ways to do this. My solution is one of many that works. It's up to the O.P. to decide whether or not the working answers fit the requirement of his or her project. – Axel Oct 27 '14 at 21:04