I am trying to display the date before an h2 title.
The date is displayed as two boxes, one above the other.
The top box contains the day of the month, the bottom box the month and year.
the HTML (with test CSS) is as follows:-
<div style="text-align: center;display: inline">
<div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px">
12
</div>
<div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px">
Dec-16
</div>
</div>
This displays nicely at the beginning of the line.
But
This is H2 text
does not display on the sane line but the next one.
Because my "date container" is made of nested divs, this does not appear to align correctly.
This works fine aligned on the same line
<div style="display:inline">This is DIV text</div>
<h2 style="display:inline">This is H2 text</h2>
This does not align correctly (as I wish)
<div style="text-align: center;display: inline">
<div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px">
12
</div>
<div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px">
Dec-16
</div>
</div>
<h2 style="display:inline">This is H2 text</h2>
TIA
Ephraim
<body style="display:table">
<div style="text-align: center;display: table-cell">
<div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px">
12
</div>
<div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px">
Dec-16
</div>
</div>
<h2 style="display:table-cell; vertical-align:middle; padding-left: 10px;">This is H2 text</h2>
</body>
Add
display: table for body
display:table-cell for div and h2
vertical-align:middle for h2
It works perfectly fine
Hope below snippet works for you.
<div style="text-align: center; float: left">
<div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px">
12
</div>
<div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px">
Dec-16
</div>
</div>
<h2 style="float: left; margin-left: 10px;">This is H2 text</h2>
Use inline-block instead of inline.
<div style="text-align: center;display: inline-block">
<div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px">
12
</div>
<div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px">
Dec-16
</div>
</div>
<h2 style="display:inline-block">This is H2 text</h2>
Related
I am trying to split the div "Info" into three sections to evenly divide the sections. I think I did that correctly to begin, but I am having issues centering the titles (Address, Hours, Contact) from their own divs. The example below is how I'm trying to make it look. Thank you for your time.
Example
.info{
display: flex;
justify-content: space-between;
}
<div class="info">
<div class="left-info">
<div class="address-title">
Address
</div>
<div class="address">
1111 Some Words, Tampa, FL 33647, United States
</div>
</div>
<div class="middle-info">
<div class="hours-title">
Hours
</div>
<div class="hours">
Mon-Fri
</div>
</div>
<div class="right-info">
<div class="contact-title">
Contact
</div>
<div class="contact">
111-111-1111
</div>
</div>
</div>
Try this one. I've given width: 33% to each div inside .info in order to divide the entire width into three equal width. In addition, gave text-align: center to individual divs.
.info {
display: flex;
justify-content: space-between;
}
.left-info,
.right-info,
.middle-info {
width: 33%;
text-align: center;
}
<div class="info">
<div class="left-info">
<div class="address-title">
Address
</div>
<div class="address">
1111 Some Words, Tampa, FL 33647, United States
</div>
</div>
<div class="middle-info">
<div class="hours-title">
Hours
</div>
<div class="hours">
Mon-Fri
</div>
</div>
<div class="right-info">
<div class="contact-title">
Contact
</div>
<div class="contact">
111-111-1111
</div>
</div>
</div>
I hope this helps you.
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
So I have the above image with a text next to it. The thing is that I want the text next to it to appear not on the bottom right but at the middle right/ top right of the image with some space between the image and text. How can I achieve it?
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' style='vertical-align:middle' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
Solved it by adding vertial-align:middle !
You can use position absolute on the text and then align the text anywhere you want using the top property.
Example:
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="display:inline; position:absolute;">
Twin Peaks
</div>
</div>
You can achieve it by using flex in the parent. Just set align-items: center
<div style="display: flex; align-items: center;">
<div>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="margin-left: 10px;">
Twin Peaks
</div>
</div>
<div>
<div style="float: left;">
<img src="https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg" height="300px" />
</div>
<div style="float: left; margin-left: 10px;">
Twin Peaks
</div>
</div>
It'll set your Text top right side of your image.
I have three div elements which have h1 contents. I want first div at left side, 2nd at center and the 3rd at right side, meaning all in the row. When I resize the window (responsiveness), the text should not break into two lines but it should only minimize or maximize the gap between each div. Currently, all three div are very close to each other. It is written in wordpress, but here is code snippet of that part:
<div style="display:inline-block;">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div style="display:inline-block;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>
<div style="display:inline-block;">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
It is implemented on the url: yaqoobyawar.com
Update your existing HTML
<div class="slot-c">
<div style="display:inline-block;">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div style="display:inline-block;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
</div>
<div style="display:inline-block;">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
</div>
with the this HTML which is using the Bootstrap 4 Grid.
<div class="row">
<div class="col">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div class="col" style="text-align: center;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
</div>
<div class="col">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
</div>
Also, remove the d-flex class from its parent div.
.grid-container {
display: grid;
grid-template-rows: 1fr;/* No. of row You want to create */
grid-template-columns: 1fr 1fr 1fr; /*No. of column you want to create */
}
<div class="grid-container">
<div>
<h1 >Yaqoob Yawar</h1>
</div>
<div>
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>
<div >
<h1 >یعقوب یاور</h1>
</div>
</div>
How can I align img in center to the respective to the text below it? The wrapper div is aligned left.
<div class="wrapper">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
Add another wrapper around the com-icon and com-text. And then align that were you want it. Example below:
<div class="wrapper">
<div class="wrapper-inner">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
</div>
Add this to your css file:
.wrapper{
text-align: center;
}
or if you just want to check if it's working you can add the infamous inline style.
This not a recommended method other than just to see if it's OK!
<div class="wrapper" style="text-align:center;">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
make a table
table.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.com-text,
.com-icon {
margin: auto;
}
<div class="wrraper">
<table class="center">
<tr>
<td>
<div class="com-icon">
<img src="image.jpg" alt="laptop logo">
</div>
</td>
</tr>
<tr>
<td>
<div class="com-text">
<p>IT Solutions</p>
</div>
</td>
</tr>
</table>
</div>
Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?
<div class="table">
<div class="row">
<div class="cell">
<h3>Heading 1</h3>
<hr />
<div class="row">
<div class="cell">Label 1</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<div class="row">
<div class="cell">Label 2 with much more Text</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<br />
<h3>Heading 2</h3>
<hr />
<div class="row">
<div class="cell">Label 3 with Text</div>
<div class="cell">Html.TextBoxFor(...)</div>
</div>
</div>
<div class="cell">
...
</div>
</div>
</div>
CSS:
div .table {
display: table;
width: 100%;
}
div .cell {
display: table-cell;
padding: 0.3em;
}
div .row {
display: table-row;
}
It should actually look more like this (red line):
Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.
You could simply add a width to the first column:
.row .cell .row .cell:first-child{
width:200px;
}
Demo Fiddle