Can someone explain why the code provided below is not centering the <p> text and instead placing it around 60-70% of the width?
<div>
<img src="logo.jpg" style="float: left;">
<p style="text-align: center;"> hello world </p>
<img src="logo2.jpg" style="float: right;">
</div>
To achieve the desired alignment of items, utilizing flexbox is recommended. Take note of the comments provided for each usage and experiment with adjustments as needed :)
.flex-container {
display: flex; /* Establishes a flexbox layout with the default row direction */
width: 100%; /* Can be omitted if not necessary */
align-items: center; /* Vertically aligns contents */
justify-content: space-between; /* Horizontally aligns contents */
text-align: center; /* Centers additional text */
}<div class="flex-container">
<img src="http://via.placeholder.com/100x100" >
<p> hello world </p>
<img src="http://via.placeholder.com/100x100" >
</div>Below are three different methods to handle floated elements, demonstrated in the code snippet provided:
p element below floated elementsimg elements within the p elementimg elements within the p elementCode Snippet Display:
Note: The sizes of the images used in this demo are assumptions for illustrative purposes only.
code {
background: #dadada;
padding: 3px;
}
* {
font-family: arial;
}<h3>1) Place <code>p</code> element below floated elements</h3>
<div>
<img src="https://placehold.it/100x100" style="float: left;">
<img src="https://placehold.it/100x100" style="float: right;">
<p style="text-align: center;"> hello world </p>
</div>
<div style="clear: both;"></div>
<h3>2) Include <code>img</code> elements within the <code>p</code> element</h3>
<div>
<p style="text-align: center;">
<img src="https://placehold.it/100x100" style="float: left;">
hello world
<img src="https://placehold.it/100x100" style="float: right;">
</p>
</div>
<div style="clear: both;"></div>
<h3>3) Use <em>absolutely positioned</em> <code>img</code> elements within the <code>p</code> element</h3>
<div>
<p style="text-align: center; position: relative;">
<img src="https://placehold.it/100x100" style="position: absolute; left: 0;">
hello world
<img src="https://placehold.it/100x100" style="position: absolute; right: 0;">
</p>
</div>Why not give flexbox a try? It has the power to solve pretty much any layout challenge you may come across.
If you're genuinely interested, utilizing justify-content: space-between on the parent element can help position your content exactly as needed.
div {
display: flex;
justify-content: space-between;
}<div>
<img src="http://via.placeholder.com/350x150" style="float: left;">
<p style="text-align: center;"> hello world </p>
<img src="http://via.placeholder.com/350x150" style="float: right;">
</div>Extremely ancient, very old, incredibly aged beyond belief ...
My plan was to organize 4 input text boxes in 4 equal columns on a single row of the form. Using Bootstrap's grid column classes, I set col--3 for medium and large screens for those four inputs. For small and extra-small sizes, I designated them as co ...
I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...
Having scoured numerous posts on responsive tables in this stack, I am still unable to find a solution to my specific issue. It's quite possible that I didn't know what exactly to look for, hence my resorting to posting a question here. The crux ...
I have developed an Angular application that enables users to filter samples by gender using checkboxes. The options include male, female, or both genders selected. Currently, the filtering works for selecting either male or female individually, as well as ...
Looking for help with a layout where there are two tables side by side, represented by the blue boxes. The goal is to be able to select a row in each table and then click the red link button below. The connecting lines between the boxes and the link button ...
As part of my job, I write messages in text boxes on a non-secure website interface for a company. Working from the comfort of my own home on my personal PC using Google Chrome, without any spy programs installed. The company prohibits pasting messages, b ...
Retrieve data from JSON file and display images in a gallery Successfully displaying the .json output on my HTML page. @Jesuraja - Would love to hear how you achieved this. I am currently facing the same issue with a JSON file containing image locatio ...
I have crafted a simple animation for an h1 element, utilizing css3 and a transition on the font-size. Here is the link to view: http://jsbin.com/oPIQoyoT/1/edit h1 { position: relative; width:500px; height: 500px; font-size: 3em; tra ...
How can I correctly utilize the v-for directive for the given HTML table structure? My goal is to loop through each file in the files array. However, simply adding v-for to the "tr" HTML tag does not produce the desired outcome. <table border="1" a ...
Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...
Currently utilizing PHP DOM for my project and facing the challenge of retrieving an element within a DOM node with a specific class name. What would be the most effective method to accomplish this? Update: Ultimately decided to switch to using Mechanize ...
In my search for a node based on text located within a child or grandchild node of its immediate sibling, I came across the following HTML structure: <div> <div class="searchedDivClass" id="DynamicId1"> </div> <div class=" ...
When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&l ...
I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...
Struggling a bit with selecting only the first child within a li tag that contains a link. HTML: <ul class="dropdown-menu" role="menu" aria-expanded="true"> <li role="presentation" class="dropdown-header">Label</li> <li><a ...
Hello there! I could really use your assistance with this code. I have been trying to make it work using JavaScript, but I'm determined not to incorporate any external JS files. Here is the snippet of JavaScript code I am working with: "use strict"; ...
I've been struggling with this issue all day and I can't seem to figure it out on my own. The solution is probably right in front of me... My contact form is mostly functional, but for some reason, I'm not receiving input for all fields. On ...
Currently working on a project using Bootstrap 3 and aiming to create a layout similar to the one shown in the image provided: Any suggestions on how to achieve this? Any code snippets would be greatly appreciated. Thank you Experimenting with something ...
Struggling to fit my content within a Material UI container in a React project, but it's creating odd margins. Check out the current look: https://i.stack.imgur.com/TaQs2.png Here's how I want it to display with full width: https://i.stack.imgur ...