FAQ Database Discussion Community


text vertical align whether it is two lines or one line

css,vertical-alignment
Actually I am trying to align the text vertically middle. Please find below image![ .factorsContent li { list-style-type:none; width:30%; margin:0px 15px; float:left; } /* 10 FACTORS BOX */ .factorsBox { width:100%; height:290px; background:#f4f4f4; border:4px solid #f4f4f4; margin-bottom:20px; } .downloadPdfImg { float:right; margin:40px 0 0 0; } .factorsBox .factorHeading { padding:10px;...

CSS vertical align button in div not working

html,css,vertical-alignment
My CSS button is not vertical aligning at the bottom of the div, I've got the following code: <div id="spacebuttons" align="right" style="height: 150px; width:920px; background-color:#6F0; display: inline-block; float:left; vertical-align:bottom"> <a href="http://www.domain.com/cspace/customerspace.php"> <img src="images/FontAwesome_f007(0)_32.png" alt="customer space" width="32" height="32" border="0" /> <button type="button" class="btn btn-default btn-sm"...

Vertically align a div in a parent which has height auto AND min-height set?

css,css3,center,vertical-alignment
I'm stuck on this one. I want to vertically center a div. Its parent has an unknown height, however, it does have a min-height. How can I do this?...

Center div in middle of other two divs in CSS

html,css,position,vertical-alignment
So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think? This...

::before vertical alignment in variable height div

html,css,vertical-alignment
I've got a dropdown box I'm working with that contains optional text and a pseudo-button (just an image, the whole box is clickable to drop down the contents). HTML for the whole piece looks something like: <div class= "btn-group dropdown" datatype = "responses" datadrop = 0> <a class = "dropdown-toggle...

CSS vertical align based on height of other element

html,css,alignment,vertical-alignment
I'm trying to create a block with an image that contains content by your side, where I intend to align the image vertically based on the content's height. I've tried alignments with table/table-cell technique but I can't get what I want.. click here to see what I want: ...

Bootstrap: Vertically center label in form-group

forms,twitter-bootstrap,vertical-alignment,valign
I have a form-group inside a horizontal form. In this form-group, the right element is higher than the left one. For this reason, I want to center the left element vertically in its row. For instance: <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email1</label> <div class="col-sm-10"> <!-- higher element -->...

Align images at the bottom of vertical menu

css,vertical-alignment
I am currently remaking a website for the group I sing with. I have a vertical menu that I found. Now I will openly say that the menu was just something I found so the coding for it as well as the CSS are not mine. I have tweaked a...

vertical align a div next to another div

html,css3,vertical-alignment
I need to vertically align a div that has text that is next to a div that contains an image. The content can have multiple lines in the title (if you see image). Currently how the html is: <div class="small-view"> <div class="small-left"> <img src="image.png" width="80"> </div> <div class="small-right"> <p class="post-title">This...

Align two labels vertically with different font size

ios,autolayout,uilabel,vertical-alignment,baseline
I have a parent UIView where I place two labels on it. Each of these labels only has one line as can be seen here: The problem now is that the baseline is wrong. I'm using auto layout and the question is how should my constraints should look like in...

How can I vertically and center 3 buttons on my mobile site?

css,html5,button,vertical-alignment,centering
I am working out of wordpress. I have 3 buttons i would like to place on my mobile site. I would like for these buttons to be centered vertically in the middle of the page. I don't really know how write this code the proper way , nor the css....

How to vertically center the contents of a flexbox item

html,css,css3,vertical-alignment,flexbox
I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch; It appears that the old trick of using display:table-cell;vertical-align:middle; doesn't work in this situation. What does? .flex-container { display:flex; align-items:center; justify-content:stretch; } .flex-item { align-self:stretch; } <div class="flex-container"> <div class="flex-item">I want to be vertically centered! But I'm...

css drop down list align img and text

html,css,vertical-alignment,text-alignment
I have a problem in my css that I can figure it out, I need to align the text and the img in my drop down list in the center. The igm looks in center but the text is a bit lower. I want also to make the text a...

No matter what I try, I can not vertically align this [closed]

html,css,css3,text,vertical-alignment
I want to do is vertically align this text, and it has become a huge struggle. Any help would be greatly appreciated. HTML: <ul id="nav"> <li> <a href="web2home.html">HOME</a> <span>See who Matthew H. Goodman is</span> </li> <li> <a href="web2cv.html">CV</a> <span>View his current Curriculum Vitae</span> </li> <li> <a href="#">RESEARCH</a> <span id="spectab"><a href="#">Current...

Set Javascript output vertical alignment to middle?

javascript,html,css,vertical-alignment
I have a Javascript clock showing in a thin frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var...

Vertical Align images inside li Chrome Issue

html,css,vertical-alignment
I want to vertically align images inside li, My code works fine in firefox but not in chrome. Can any body help me with this? Here is the HTML: <div class="brands container content"> <ul id="brandlogo"> <li><a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></a></li> <li><a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class=""><img...

Vertical align images evenly in Bootstrap 3 with respect to next column

html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment
I want to vertically align one or multiple images with a text (whose height is unknown). The images should be vertically centered: The current HTML code looks like this: <div class="row"> <div class="col-md-3"> <img src="images/sampleimage.png" class="img-rounded img-responsive"/> </div> <div class="col-md-9"> Text goes here </div> </div> How can I achieve this...

place product image at bottom of the box

html,css,image,vertical-alignment
CODE I want image to aligned at bottom of the box. There will be product images which are coming from backend and there is not fix size for it. HTML <ul> <li><img src="http://img3.wikia.nocookie.net/__cb20120422063108/nickelodeon/images/2/27/Spongebob1.gif" alt="" /></li> <li> <img src="http://img2.wikia.nocookie.net/__cb20120717231330/hulksmash/images/7/78/Image_placeholder.jpg" alt="" /> </li> </ul> CSS ul { list-style: none; } li {...

How to align text and images in the middle

html,css,css3,vertical-alignment
I added a bar on the top of my website, and I want to align the images and text to the middle. How can I do that? This is what I tried so far, and it seems like I'm doing something wrong. What the best proper way? <div class="casual" style="...

vertical aligning two pull-right elements of different heights (Bootstrap)

html,css,twitter-bootstrap,css-float,vertical-alignment
I have two links (one text and one image) that I'm trying to pull-right and have the bottom of each vertically-align. But right now, it looks like this: (vertically aligned with each others' tops) Relevant HTML: <div class="col-md-7"> <div class="thumbnail"> <div class="caption clearfix"> <h2>Heading</h2> <p class="thin">Donut jelly beans muffin cupcake....

Vertical-top align ul items side by side

css,html5,html-lists,vertical-alignment
I set my UL items to have display: inline-block, 30% width, and they align side by side corretly. But, they vertical align to bottom if there is a bigger li. Is there any way to top align this items? One solution that I don't like is to have a Javascript...

How to center horizontal table-cell and content inside it in the middle

html,css,vertical-alignment
I am building on the question originally asked here How to center horizontal table-cell with a slight modification. Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle. Changing vertical-align: middle; for .column does...

Center link vertically in a div

html,css,twitter-bootstrap,vertical-alignment
There is an "place order" link on the web page, which I want to center both horizontally and vertically. I managed to center it horizontally, but not vertically. I'm using Twitter Bootstrap. This is what it looks like now and the red arrow shows where I'd like to put it:...

Vertical-align in inline-block container

css,vertical-alignment
How to align .content in the middle (vertically) without specifying height of .container explicitly? <div> <div class="container"></div> <div class="content"></div> <div class="one"></div> </div> <style> .container { border:1px solid red; display: inline-block; } .content { height: 50px; width: 70px; display:inline-block; vertical-align:middle; border:1px solid green; } .one { height: 200px; width: 20px; background:...

How to vertical align icon inside label and button in the same way

html,css,css3,vertical-alignment
I'm trying to center vertically an icon inside an ul/li tag. Depending if placing the icon inside a button tag and label tag I get two different results and I can not get the alignment in the label working. <ul> <li><label class="btn"><i class="fa fa-anchor"></i></label></li> <li><button class="btn"><i class="fa fa-anchor"></i></button></li> <li><button class="btn"><i...

Robust vertical alignment of both box and baseline using line-height?

css,vertical-alignment
When setting the same line-height, height and box-sizing: border-box on elements in a line, I'd expect them to align vertically (both at the baseline and the box) properly. No luck: alignment seems to always be off by one pixel for some combination of input/span and/or with-border/without-border. See below or http://jsfiddle.net/xcgyh22q/9/...

CSS vertical align block in a container

css,html5,vertical-alignment
fiddle Any way to align all .col to the top, matching the height of their siblings above?...

CSS: not exact vertical align in table

css,vertical-alignment
I find that if I put an image inside a table cell like this (JSFiddle): <table style="height: 300px; border: 1px solid black"> <tr> <td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td> </tr> </table> There will be a small space below the image, making the vertical align not exact: Does any one know what is happening...

How to add vertical alignment feature to a major-mode for Emacs

emacs,elisp,vertical-alignment,system-verilog
I am using verilg-mode for emacs everyday but the code alignment is not that good for me. So want to add something like vertical alignment. First, I hope to align the declaration lines like these: bit [1:0] a; bit [3254:0] b; bit unsigned [P_DWIDTH-1:0] c; bit unsigned [P_DWIDTH-1:P_DWIDTH-4] d; int...

How to center div vertically inside of absolutely positioned parent div

html,css,vertical-alignment,absolute
I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case. <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> Result: Expectation: Please suggest...

When to use position absolute vs position relative when vertically aligning with css

html,css,css3,css-position,vertical-alignment
Originally I followed this article which used position: relative on the child element: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ http://codepen.io/anon/pen/KpWKWg But I couldn't get it to work on my code for the life of me: http://jsfiddle.net/ge77ma0e/ Then I found these instructions which use position: absolute on the child element: https://css-tricks.com/centering-css-complete-guide/#vertical-block-unknown http://codepen.io/chriscoyier/pen/lpema And when I tried...

CSS vertical align puzzle with float right and variable line height

css,vertical-alignment,right-align
I have a table where numbers are aligned to the right and texts can have more than 1 line. http://jsbin.com/qelosicono/1/edit?html,css,output The vertical-align:middle does not work with float:right unless I set the line-height which I can not set because some texts will wrap to multiple lines while other will stay single...

How to vertically align div inside Bootstrap 3 column

html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment
I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the...

Align Left and Right floats to bottom of Parent div

html,css,css-float,vertical-alignment
I have an element in an HTML page with child elements <div id="parent"> <div class="child01"></div> <div class="child01"></div> <div class="child02"></div> </div> I have an example with current css at http://jsfiddle.net/exu76qnx/ and I would like to know how to have the child divs align to the bottom of the parent div (without...

CSS Vertical align to middle

html,css,vertical-alignment
I know this issue was discussed many times before. but honestly I didn't find any proper solution for this unique case: I have the following HTML code: <div class="print-types-links"> <ul> <li> <a href="#"> <div> <span>aaa</span> </div> </a> </li> <li> <a href="#"> <div> <span>bbb</span> </div> </a> </li> </ul> </div> and the...

How to vertically align icon font

html,css,vertical-alignment,icon-fonts
I am trying to vertically align font icons. I have tried "vertical-align: middle" but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly. An example on Jsfiddle: https://jsfiddle.net/crphowLg/7/ <link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css"> <style> div {...

center text vertically and horizontally over div/img

css,vertical-alignment
I'm trying to get "concierge" to always be centered over the image on this page. I think I'm close but it's not just right. Any ideas? header.concierge_header { position: absolute !important; top: 30% !important; color: white !important; left: 50%; } and then concierge_header_div is the parent other option would be...

vertically align font awesome icon in td with variable height

html,css,twitter-bootstrap-3,vertical-alignment,font-awesome
I need to vertically align a font-awesome icon in the middle of a td. This td can contain a single or a double line of text, so it has a variable height. I just can't figure out how to align it. I tried everything from line-height over vertical-align to display:...

Fixing custom font vertical position. Apple Font Tool Suite not available anymore?

ios,fonts,apple,vertical-alignment,custom-font
I followed the link in Fonts, and I'm redirected to the downloads site. There I canĀ“t find the Apple Font Suite Tool package, has it been renamed? Or it doesn't longer exist? Thanks EDIT: I'm using custom fonts in my iOS app, and it seems that they add a vertical...

Vertically Align divs and text

html,css,vertical-alignment
[jsfiddle.net/c8q17Lu4/][1] Hello, I'm having trouble with probably an easy fix. I need to vertically align the '#header-right-b-headers' orange divs within the blue '#header-right-b' div, and also vertically align the text in the orange divs. I've tried the vertical-align and display as inline block rules, and some others, and don't understand...

Vertically center image when image is higher than container

html,css,vertical-alignment
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the...

Horizontal ScrollView in fragment Android

android,scrollview,vertical-alignment
I would like to make my ScrollView filling out the full layout of a fragment and scrolling horizontally, not vertically. How can I achieve that?! Like the album covers Thanks...

IntelliJ align multiple lines of code vertically

intellij-idea,vertical-alignment,pycharm
I am wondering how to align (the keyboard shortcut) a line or a block of code with the previous line, so that they have the same indention or starting from the same column in IntelliJ and PyCharm. cheers...

Vertical alignment of a floated div

html,css,vertical-alignment
I'm trying to center vertically a floated div, here is the JSFiddle .wrapper{ width:250px; background-color:red; } #SmileImg{ height:100px; width:auto; } .textwrapper{ float:right; } <div class="wrapper"> <img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" /> <div class="textwrapper"> <p>Please Smile!</p> </div> </div> I do not know how to put the text "Please Smile" vertically centered. Hope someone...

Why does vertical-align: middle causes other elements to misalign?

html,css,vertical-alignment
With this code: .header { background-color: #444; height: 56px; color: white; } a { padding: 20px; } input { background-color: #444; border: 0; line-height: 24px; margin-left: 10px; color: white; height: 56px; padding: 0; font-size: 20px; vertical-align: middle; } <div class="header"> <a href="#"> <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" /> </a> <input placeholder="Search" /> </div>...

Vertical centering various sized spans with line-height

html,css,vertical-alignment
I want to gain a deeper understanding of how line-height works, in particular with centering text vertically within a fixed height element. In the example link below, you can see that setting the line-height to be equal to the container's height will center items as long as the items are...

How to align wordpress images properly?

html,css,wordpress,image,vertical-alignment
I have been working on a website in wordpress that has been doing what I need so far. Today I tried adding a row of images (with and without captions), and for some reason the top line of the images are displaying each slightly below the other one. You can...