I have used text-align: left; in the css class name-tag but somehow the name is still aligned to the right hand side of the div. Why?
.container {
width:500px;
position:absolute;
display:table;
border: 2px solid red;
}
.img-circle {
background: yellow;
border-radius: 50%;
width: 60px;
height: 60px;
border: 2px solid #666;
font: 32px Arial, sans-serif;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align: left;
border: 1px solid black;
}
<div style="container">
<div class='img-circle'>
AK
</div>
<div class='name-tag'>
Aaron King
</div>
</div>
Sample code can be found here: http://jsfiddle.net/kongakong/6Lrfwt7m/3/
The outcome is this:
In your fiddle you have <div style="container"> instead of <div class="container">
Then you have padding of 75px so its not totally on the left.
It is aligned to the left, you just have large padding to make it seem like it's not. Remove padding-left:75px; and your problem is fixed.
the problem is that there is padding on left and so the cell seems aligned at right.
if you remove the padding you can see that is working correctly.
Check this fiddle:
.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align:left;
border: 1px solid black;
padding-left:0;
padding-right:30px;
}
http://jsfiddle.net/6Lrfwt7m/8/
Add CSS Box Sizing for width fixed in padding.
.name-tag {
display:table-cell;
padding:10px;
vertical-align: middle;
text-align: left;
border: 1px solid black;
box-sizing:border-box;
}
Related
Trying to show dive next of span but it is not working.I do not know how to align. If anyone know please help to find the solution.
app.component.html:
<div class="content">
<div class="title">Titles</div>
<span class="icons"> images </span>
</div>
app.component.css:
.content{
width: 100%;
height:150px;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
}
expecting:
Demo:https://stackblitz.com/edit/angular-svg-use-2c9trb?file=src%2Fapp%2Fapp.component.css
Use display:inline-block;
p {
font-family: Lato;
}
.content {
width: 100%;
height: 150px;
direction: rtl;
text-align: left;
}
.title {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
.icons {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
and use direction and rtl to reverse direction of elements
add inline-flex to displays as an inline-level flex container. Then add margin-inline-end to get space between div and span.
.content{
width: 100%;
display: inline-flex;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
margin-inline-end: 5px;
}
Is there some useful techniques?
Here is the fiddle
For text centering I tried to use this:
.wrapper div {
position: relative;
top: -8px;
}
To remove bottom canvas margin I tried to use this:
.wrapper canvas {
margin-bottom: -5px;
}
But I always try to avoid negative parameters.
Did you mean vertically align? Like this?
.wrapper {
border: 1px solid green;
display: inline-block;
}
.wrapper div {
border: 1px solid blue;
display: inline;
margin-left: 10px;
}
.wrapper canvas {
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<canvas width="32" height="32"></canvas>
<div class="question">1234567890</div>
</div>
is this what you mean?
canvas {
float: left;
}
You can use this code for horizontally design
<style>
.wrapper {
border: 1px solid green;
float:left;
}
.demo_class{
display: inline-block;
float: left;
}
.demo_class .question{
height: 32px;
line-height: 32px;
}
<div class="wrapper">
<div class="demo_class">
<canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas>
</div>
<div class="demo_class">
<div class="question">1234567890</div>
</div>
There's a piece of html:-
<div class="field-display">
the text here
<a class="delete">x</a>
</div>
The anchor element is button which has float: right; CSS property. The CSS for the div is:-
.field-display {
height: 25px;
padding: 2px 15px 2px 10px;
vertical-align: middle;
}
But vertical-align: middle; is not working. Any Idea how to align text in middle of the div?
You can add display: table-cell; to your div.
.field-display {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px 15px 2px 10px;
vertical-align: middle;
display: table-cell;
}
Fiddle Demo
Side Note : display: table-cell; is supported by IE8 and above..!
I have been trying to make a line join two words.
Sentence 1 would be on the left and no 2 on the right.everything should be on the same line.
I want the line to be flexible and adjust its width when the browser is re sized, and have so far failed miserably to do this.
It would be similar to this :
see jsFiddle
<h1>Heading</h1>
<h1>This is a longer heading</h1>
CSS
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
but with only one line joining the words.
Is this what you're after?
Live demo
HTML:
<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>
CSS:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
.headerPart1, .headerPart2 {
display: inline-block;
clear: none;
}
I guess this is what you are looking for: Is this http://jsfiddle.net/gSsGy/1/
I've added a width: 50% to the h1 element and then floated it to left.
Demo : LINK
just add:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
h1{
display: inline-block;
clear: none;
}
and this div before h1:
<div class="headercontent">
I am trying to get the contact form on this page to display on the left and the contact information (the address at the bottom) to display on the right. The divs are both small enough widths that it should not be a problem, and they are both floated to the left. It doesn't seem to be working however. Does anyone have any idea what the problem could be?
The code is shown below:
#mid {
width: 793px;
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
float: right;
height:auto;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
clear: right;
padding-bottom:10px;
}
#mid #contact-info {
float:left;
width:250px;
text-align:left;
padding:14px;
}
#mid #contact-form {
float:left;
text-align:left;
width:300px!important;
}
You can create a common parent div and float one left and the other right with specific width.
You can do this...
#mid #contact-info {
float:right;
width:250px;
text-align:left;
padding:14px;
}
#mid #contact-form {
float:left;
text-align:left;
width:300px!important;
}
But like you say...it should be working how it is....
But without your HTML, we can't really help anymore
Is this what you are trying to do?
http://jsfiddle.net/R6Mra/
CSS
.left {
float: left;
}
.right {
float: right
}
#parent {
border: 1px solid black;
padding: 15px;
width: 50%;
}
#box1, #box2 {
border: 1px solid black;
padding: 15px;
}
HTML
<div class="right" id="parent">
<div class="left" id="box1">Hello World!</div>
<div class="right" id="box2">Hello World!</div>
</div>