Force Elements to Be Horizontally Aligned

Force elements to be horizontally aligned

if you make the kid an inline-block element and take off the float:left, you can make the parent have white-space:nowrap and it will achieve what you want:

.parent{
    width:300px;
    height: 50px;
    background-color: red;
    white-space:nowrap;
    overflow-x:scroll;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    display:inline-block;
    margin-left:4px;

}

http://jsfiddle.net/GRBc6/6/

How can I horizontally align my divs?

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

How do I achieve horizontally aligned, gap-less, and centered div elements in container div

You can achieve this by removing the display: inline-block and adding float: left. Also you should consider calculating your width, since 3*33% != 100%:

.content .featureitem{ 
    height: 100%;
    width: calc(100%/3);
    //display: inline-block;
    float: left;
    background-color:bisque;
    margin: 0;
}

Fiddle

Horizontally align three elements on center, left and right in the same row/line

You can use the inline-block porperty and also the text-align with the value justify. Try this:

.container {
    text-align:justify;
}
.container > div {
    display:inline-block;
}

But in order to make it work you need a little fix with a pseudo-element:

.container:after {
    content:" ";
    display:inline-block;
    width:100%;
}

Check the Snippet Below

.container {  text-align: justify;}.container > div {  display: inline-block;  line-height: 30px;  padding: 0 10px;  background: #000;  color: #fff;}.container:after {  content: " ";  display: inline-block;  width: 100%;}

<div class="container">  <div class="box-a">some content</div>  <div class="box-b">other content</div>  <div class="box-c">some other content</div></div>

CSS - Make divs align horizontally

You may put an inner div in the container that is enough wide to hold all the floated divs.

#container {  background-color: red;  overflow: hidden;  width: 200px;}
#inner {  overflow: hidden;  width: 2000px;}
.child {  float: left;  background-color: blue;  width: 50px;  height: 50px;}

<div id="container">  <div id="inner">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div></div>

How can I align two divs horizontally?

Float the divs in a parent container, and style it like so:

.aParent div {    float: left;    clear: none; }

<div class="aParent">    <div>        <span>source list</span>        <select size="10">            <option />            <option />            <option />        </select>    </div>    <div>        <span>destination list</span>        <select size="10">            <option />            <option />            <option />        </select>    </div></div>

horizontally align elements in a table cell on a single line

Have you tried this?

xyz {
   display: inline;
}

Horizontal align two react elements

Just use flexbox, set the container CSS to have display: flex this will put everything on the same line.

Look into using styled components when it comes to applying css to components in ReactJs in general.

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";

import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

const divStyle = {
  display: 'flex',
  alignItems: 'center'
};

class App extends React.Component {
  state = {
    dropdownOpen: true
  }
  render() {
    return (
      <div style={divStyle}>
        <h3>99 results</h3>
        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle caret>
            Dropdown
    </DropdownToggle>
          <DropdownMenu>
          </DropdownMenu>
        </Dropdown>
      </div>
    );
  }
}

Vertically align horizontal inline-block elements

You can take a look here, I've made it from scratch...

So what I did here is, I've used display: table; for the container element and am using display: table-cell; for the child div and as the child div are now table cells, I used vertical-align: top; so that the elements align to the top in those cells

section {  display: table;  width: 100%;}
section > div {  vertical-align: top;  display: table-cell;  width: 33%;  text-align: center;}

<h4>Additional Info</h4><section>  <div>    <input type="checkbox" /><br />    <label for="">I've got a valid certificate permits</label>  </div>  <div>    <input type="checkbox" /><br />    <label for="">I've got a valid certificate</label>  </div>  <div>    <input type="checkbox" /><br />    <label for="">I certificate</label>  </div></section>

---

Related Topics