1

I think this is a different question from other "autofit"-related questions.

I have single-line text label that I'd like to auto-fit to always be half the screen width (dynamically during and after resize, etc.) as well as centered on the page vertically and horizontally. I've tried the jQuery FitText plugin, but it does not seem to work well with vertical centering (shifts up or down depending on the font size, sometimes below the viewport)

It may be due to my use of absolute positioning, but I can't find any alternate way to accomplish this.

My CSS:

h1 {
  position: absolute;
  top: 25%;
  right: 25%;
  left: 25%;
  bottom: 25%;
  display: table-cell;
  vertical-align: middle;
}

This JSFiddle shows the block I would like to fill: http://jsfiddle.net/KFySS/6/

Edit: I've added a fake background image text to the fiddle above, which behaves very closely to what I'd like the real size behave to be.

I want the short text to fill the block outlined with dashed line. It should also be centered vertically and/or horizontally. This bounding box is just for illustration, but it was my starting point when using the Fittext plugin.

4

2 回答 2

1

I found a solution that uses the new CSS3 vw, vh, and vmin font sizing units, which sizes fonts relative to the current viewport. 

<div>
  <h1>Hi!</h1>
</div>

div {
  text-align: center;
}
h1 {
  font-size: 50vmin;
  position: absolute;
  top: 50%;
  margin-top: -25vmin;
  width: 100%;
}

Here is an example for newer webkit browsers:

http://jsfiddle.net/uTykf/

The vertical centering approach I used seems a bit ugly, but best I could do. Happy to hear if there's a better approach.

于 2013-01-09T16:57:25.513 回答
0

I think this is what you want.

h1 {
  padding: 10%;
  text-align: center;
  border: 4px dashed red;
  margin: 25%;
}

Check out the link below:

http://jsfiddle.net/GLEcd/2/

于 2013-01-07T10:31:46.837 回答