spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

how to align sub tags in parent tag



To make this:

+----------------------------------------------+
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~               |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  +---------+  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  |         |  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  +---------+  |
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~               |
+----------------------------------------------+

Solved

Here

which uses the display: flex;

/* flex method
beautiful */

.top6 {
  background-color: blue;
  height: auto;
  display: flex;
  align-items: center;
  vertical-align: middle;
}
.in6 {
  width: 20%;
  height: 100%;
  vertical-align: middle;
}
.in62 {
  width: 70%;
  height: 100%;
  vertical-align: middle;
}
<div
class="top6">
  <div class="in62">Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est
laborum
  </div>
  <div class="right">

  </div>

  <div class="in6">
    <button>ButtonText
      <button</div>
  </div>
  <br>

LIVE DEMO with your styling


Categories : CSS

Related to : how to align sub tags in parent tag
Hover dropdown: clicking parent link goes to parent page
If I understand correctly, this could be the answer add link in the button <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> <a href="http://stackoverflow.com">Dropdown parent link</a> <span class="caret"></span> </button> <ul class="dropdown-menu">

Categories : Javascript
parent of parent - how to make it prettier codewise
Do you know the type of selector you need? Why not .closest()? $myDiv.closest('.parentSelector'); Also, you can use div.parent().parent(), will work just as well

Categories : Jquery
What is the best way to create a parent/master entry in a DJANGO CRUD database app and then add associating data fields to the parent/master?
No. You don't need multiple barcode models. The fact that you have a ForeignKey from barcode to hardware already allows you to have multiple barcodes for each hardware: a ForeignKey defines a many-to-one relationship. Also, it doesn't make any sense to name the foreignkey after the model it is in: it needs to be named for the model it is pointing to, ie hardware. Finally, don't prefix your field n

Categories : Python
Having a Parent-Children class hierarchy, how can I hold various actual children in a single "Parent"-typed variable?
If those objects don't need to live very long, then you could simply do: switch(arg[1]) { case CHILD1: { Child1 c1; c1.start(); break; } case CHILD2: { Child2 c2; c2.start(); break; } case CHILD3: { Child3 c3; c3.start(); break; } } On the other hand, if you need to keep

Categories : C++
IE5 Vertical Align
<style> .text-center { text-align: center; } .fullFrame{ width: 100%; height: 100%; } </style> <table class="fullFrame"> <tr> <td class="text-center"> <a class="block cancel vertical-align text-center" href="#" id="btn-cancel"> <h4>Cancel</h4> </a> </td> </tr> </table> This will make t

Categories : CSS
Recently Add
How to start a new column in flex column wrap layout
Add record CSS not rendering Jtable
Inline CSS Does Not Work When Transferred to External Stylesheet
CSS Positioning Issue on Chrome
PhantomJS + CMYK color css3
Wrap an input with pseudo borders made of divs
Site doesn't display styling on Firefox or IE –– works fine with Chrome and Safari
CSS - Position image to the left + partly cut-off + responsive + Bootstrap
Can i cross-fade li elements using angularjs ngAnimate
hidden-sm in bootstrap 3
Ruby on Rails - Bootstrap / Form_for vs input_groups - How to stop styles butting heads
locating joomla files when I do inspet element in firefox
Some Images flicker in IE8
Tooltip CSS ONLY: focus and hover prevents access to following button
Strange shadowed boxes randomly appearing - CSS error?
Bootstrap popover dynamic size
Horizontal List Exceeding Right Margin
How to put !important in all CSS properties using SASS or CSS3?
Wrap content and remove extra whitespace?
Force div's height expand with it's container
Animation delay on page load
CSS Keep on-hover item open until another item is hovered on
Confused by LESS replace() function behavior
How to transform an image in SVG (or CSS) into a non-parallelogram shape?
Ignore CSS declaration on a specific control
Mark space for :after content non-breaking
2 inline images - 1 centered and 1 right using Bootstrap
Bootstrap - three sibling col divs, is this layout possible?
jquery mobile-vertically center two lines of button text
Change footer content in magento
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.