I'm looking to align the image and text horizontally using CSS.
Check out my code below:
<div class="latest-tweets">
<ul>
<li>
<p class="tweet-text">This is tweet Text</p>
</li>
</ul>
</div>
See it in action here: https://jsfiddle.net/Lwhnunad/1/
Any assistance would be greatly appreciated.
Instead of using display: inline, opt for display: inline-block in your CSS code:
.latest-tweets ul li p,
.latest-tweets ul li:before {
display: inline-block;
vertical-align: top;
}
If you have an inline element followed by a block-level element, the latter will start on a new line. To keep them on the same line, make both elements inline-block.
.latest-tweets ul li:before {
content: url("https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
display: inline-block;
vertical-align: top;
}
.latest-tweets ul li {
background: none;
list-style:none;
}
.latest-tweets ul li p {
display: inline-block;
vertical-align: top;
max-width: 85%;
}<div class="latest-tweets">
<ul>
<li>
<p class="tweet-text">This is tweet Text</p>
</li>
</ul>
</div>Note: Apply a
max-widthtopso it remains contained when lots of text is added.
.tweet-feed ul li:before {
content: url("https://s27.postimg.org/419bicyab/home_tweeter_icon.jpg");
display: inline-block;
float:left;
}
.tweet-feed ul li {
background: none;
list-style:none;
}<div class="tweet-feed">
<ul>
<li>
<p class="tweet-text">This is tweet Text</p>
</li>
</ul>
</div>Hi, I am looking to create a simple input text field that functions like this example. <input type="text" id="pin" name="pin" maxlength="4" size="4" placeholder="____"> I would like the placeholder on the front end to stay visible until all charact ...
Is there a way to align the text "burger king" to the right of the logo on my webpage? I attempted using the bootstrap class pull-left, but it didn't produce any changes. This is how my page appears: body { font-size: 16px; background-color: # ...
I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...
I am looking to create a table cell with alternating color combinations based on specific conditions. Here is the code snippet: <tr ng-repeat="x in data"> <td> <span ng-if="((x.time2 < x.time1) || (x.time2 < x.time3))" ng-style="colo ...
Despite the numerous times this question has been asked, I am struggling to find a solution that fits my specific case. Let's dive into it. My navigation setup involves using Bootstrap nav pills to navigate through content. The structure looks like t ...
Here is the current layout of my sidebar: https://i.sstatic.net/c1sy6.png I want it to always occupy full height, how can I achieve this? I've tried using height: 100%, but it doesn't seem to work. Here is my CSS code: #sidebar { /* Make s ...
Within my HTML, I have arranged two images to sit adjacent to one another. Interestingly, one image happens to be taller than the other. Despite assigning a CSS property of vertical-align: middle to both images, the result is that the shorter image appears ...
Currently, I am in the process of learning JavaScript and have come across a scenario that has left me uncertain. I am attempting to utilize a variable in a particular situation and am unsure if it will work as expected. I am looking to assign a unique id ...
I have encountered an issue where my code does not contain any br tags between the beginning of the div tag and table tag, but when I view the source, several br elements appear. Below is the code snippet from a .php file: <div id='tx_addAccountp ...
I attempted to have 2 columns appear side by side on tablets by using col-md-6 so that each column would only use 6 units. However, when switching from desktop to tablet size, the columns end up stacked vertically, with each column now using all 12 units ...
I'm experiencing some difficulties with the Bootstrap CSS Carousel on my website. The left and right arrows seem to be unresponsive, and the slides are not transitioning automatically. I have been unable to identify the root cause of this issue. Belo ...
I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...
While developing a webpage in Vscode, I noticed that all my CSS and Bootstrap SASS styles render correctly. However, when opening the page without using Vscode live server, some of the styles are not being applied. ...
Looking to create a 100px by 100px image in Inkscape with major lines every 100px and minor lines every 10px. This will help verify viewport size when used as a repeating background. What's the best approach for this? Thinking of using #888888 for ma ...
One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...
I am struggling to position my input (class="button") where I want it to be html: <div id="popup" class="overlay"> <div class="popup"> <a class="close" href="#">×</a> <div id="content"> <select required name="list" ...
Recently, I came across an interesting feature on Facebook where text in messages is automatically converted into smiley faces without the need to reload the page. This got me thinking about how I could recreate this same functionality using jQuery and HTM ...
Here's a snippet of the css and html code: CSS: div { height:24px; line-height:24px; } HTML: <div><img src="image.png"/>Text</div> According to the code, a div should be 24 pixels high with text vertically centered after ...
Provided Input: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600"> <g enable-backgrou ...
In order to gain a clearer understanding, I have a question regarding inserting data from a form. Let's say I have the following form: <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <inp ...