html - how to apply vertical-align: middle at div -


I have searched it online and found some solution but nothing works on my project, in most solutions, I have found:

  & lt; div class = "a" & gt; & Lt; div class = "b" & gt; Unknown stuff should be focused & lt; / Div & gt; & Lt; / Div & gt; .a {display: table; Width: 100%; }. b {display: table-cell; Text align: center; Vertical-row: middle; }   

By implementing this technique, I have tried to create something like this:

The text in the left column is only required to stand in the middle Was there. But, it is not working with that technology:

  & lt; Div class = "row" & gt; & Lt; Div class = "left" & gt; & Lt; P & gt; Sample text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; P & gt; Input element & lt; / P & gt; & Lt; P & gt; Table & lt; / P & gt; & Lt; P & gt; Image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "left" & gt; & Lt; P & gt; Sample text sample text sample text sample text sample text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; P & gt; Input element & lt; / P & gt; & Lt; P & gt; Table & lt; / P & gt; & Lt; P & gt; Image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "left" & gt; & Lt; P & gt; Sample text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; P & gt; Input element & lt; / P & gt; & Lt; P & gt; Table & lt; / P & gt; & Lt; P & gt; Image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

CSS:

  .ro {width: 100%; Background: #ccc; Border bottom: 1px solid # 999; Display: Table; }. Left {float: left; Width: 40%; Padding: 20px; Exhibit: Table-Cell; Vertical-row: middle; } .right {float: right; Background: #fff; Width: 40%; Padding: 20px; }   

How can I make the left-column text vertically in the middle? Note: I can not use a certain height because the contents of each row will be different

  .left {width: 40%; Padding: 20px; Exhibit: Table-Cell; Vertical-row: middle; }   

Excluding "float: left". Removes that problem from the Left style, but it is not good to use the table and the div together.

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -