27473

Center Text Vertical In Element That changes Height and Width

Question:

I have the following code

<a href="http://codepen.io/anon/pen/EZeVXG" rel="nofollow">http://codepen.io/anon/pen/EZeVXG</a>

HTML

<a href="#" class="col-inner"> <img src="http://placehold.it/450x450" /> <div class="content"> <h3>Hello World</h3>

Lorem Ipsum Dolor Sit Amet

</div> </a>

CSS

img{ max-width: 100%; height: auto; } .col-inner{ position: relative; display: inline-block; } .content{ position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; background-color: rgba(0,0,0,.7); color: #FFF; text-align: center; }

I've tried a bunch of techniques found on Stack Overflow but everything seems to work only if you know the width and height. Both of those properties will change as you flex the browser. Is there any way to keep the text centered vertically the whole way?

Answer1:

I found this trick on stackoverflow as well, I will add a link as soon as i find it again:

height: auto; // (this is the default) position: absolute; top: 50%; transform: translateY(-50%);

That works because translateY takes the height of the element, and top uses the height of the surrounding element.

<a href="http://codepen.io/anon/pen/zNJvgg" rel="nofollow">http://codepen.io/anon/pen/zNJvgg</a>

Answer2:

You should try and use flexbox and if possible make some changes in your html.

In my opinion, to make this work I would use:

HTML

<a href="#" class="col-inner"> <div class="content"> <h3>Hello World</h3>

Lorem Ipsum Dolor Sit Amet

</div> </a>

CSS

.col-inner{ max-width: 100%; min-height: 150px; position: relative; background-image: url('http://placehold.it/450x450'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; display: flex; justify-content:center; align-items:center; } .content{ color: #ff0000; }

I just added the the image as background-image for the tag that acts as a container, and used display: flex; justify-content:center; align-items:center to horizontally & vertically center the text and all the elements inside the container.

You can tweak the height of .col-inner and see that no matter what height the class has, it will always be centered.

I've set a codepen to play with it: <a href="http://codepen.io/anon/pen/ygxOyY" rel="nofollow">code</a>

Keep in mind that if you want to use flexbox you should prefix your code. Use this website <a href="http://caniuse.com/" rel="nofollow">caniuse</a> to see what prefixes you should add to flexbox and related properties.

Recommend

  • Bundled scripts not working MVC
  • css Star-rating html
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • How to align an image side by side with a heading element?
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Making header act like google chrome mobile app address bar
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • how to get username into sql trigger when multiple users signed on from asp membership
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • blade.php method outputting it's result to the form
  • RxJava debounce by arbitrary value
  • D3 get axis values on zoom event
  • C: Incompatible pointer type initializing
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Handling un-mapped Rest path
  • Algorithm for a smudge tool?
  • Paperclip, set path outside of rails root folder
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to set/get protobuf's extension field in Go?
  • script to move all files from one location to another location
  • How to check if every primary key value is being referenced as foreign key in another table
  • How to show dropdown in excel using jrxml (jasper api)?
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • How to get next/previous record number?
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • Android Studio and gradle
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • python regex in pyparsing
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Memory offsets in inline assembly
  • python draw pie shapes with colour filled