I'm trying to display an icon next to some text on the same line, but it seems to only work when using the <div> tag. When I try to do the same with the <p> tag, it doesn't align properly. Can someone explain why?
.container {
display: flex;
}
i {
color: black;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<i class="material-icons">call</i>
<!-- <div>9988998899</div> -->
<p>9988998899</p>
</div>When using the p tag, it is important to note that it comes with a default margin value that may need to be reset or adjusted using the align-items property. Similarly, when working with div tags, you will observe that elements are aligned based on their top borders by default, which can be changed by utilizing the align-items property:
.container {
display: flex;
outline: 1px solid orange;
}
.c1 p {
margin: 0;
}
.c2, .c4 {
align-items: center;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<pre>// p with margin: 0</pre>
<div class="container c1">
<i class="material-icons">call</i>
<p>9988998899</p>
</div>
<pre>// p without margin: 0, but align-items:center</pre>
<div class="container c2">
<i class="material-icons">call</i>
<p>9988998899</p>
</div>
<pre>// div without align-items:center</pre>
<div class="container c3">
<i class="material-icons">call</i>
<div>9988998899</div>
</div>
<pre>// div with align-items:center</pre>
<div class="container c4">
<i class="material-icons">call</i>
<div>9988998899</div>
</div>In an effort to modularize my extensive React application into reusable components that can be shared with other projects, I am looking to create a mini UI library consisting of generic components like Buttons, Headers, and Dropdowns. However, the challeng ...
In this example, we can see how Bootstrap handles dismissible alerts: <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidde ...
Is it possible to customize the content of a reusable header section based on the current route data in Angular? The header currently displays a title and description pulled from the route data property. My concern is how to dynamically inject different H ...
I'm surprised by how difficult it was to find information on this topic through Google. Currently, my struggle lies in wanting my form fields to change color based on validity only after the user has interacted with the form. I don't want invali ...
I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...
I've been trying to arrange four images side by side, with two on the top row and two on the bottom. I want to ensure they stay consistent across all browser sizes except for mobile. Here is what I have attempted so far: #imageone{ position: absol ...
function displayContent(a) { var content = $("#" + a).html().trim(); alert(content); $('#temstoredivid').append( "<div class='maincover' id='maincov1'>" + " <div class='subcover' id='sub ...
My webpage currently displays a row of cards horizontally, but I would like them to align vertically on smaller screens. Currently, when the screen is shrunk, the cards go off the page instead of stacking vertically. I still want the cards to have equal sp ...
I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...
While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...
Looking for a solution to the issue with the dollar answer (same problem). I have app.coffee: pp.configure -> publicDir = "#{__dirname}/public" app.set "views", viewsDir app.set "view engine", "jade" app.use(stylus.middleware debug: true, src: view ...
I am looking to replicate this specific design using React and React Native [![enter image description here][1]][1] After attempting to implement it with the React Circle Progressbar package from here, I have not been successful in achieving the desired ...
This is the script I am using for ajax: var cid = $(this).data('cid'); var sendData = { canidtoset: cid }; $.ajax({ url: '/functions/cv_showinformation.php', type: 'post', data: sendData, dataType: 'json ...
I am facing an issue where a <a> tag inside a <div> element is not being recognized properly, causing the <div> height to remain unchanged and not accommodate the link as intended. You can view my HTML/CSS code here: http://jsfiddle.net/ ...
I am trying to display the word "test" by focusing on a text input. However, when the text input is focused, the z-index of the text should change to 0 but it's not working as expected. I have provided my code below: .text{ position: absolute; ...
I previously had a default bootstrap user select box with a border-radius style applied: <div class="container"> <select class="form-control" style="border-radius: 1rem;"> <option value="1">Us ...
I have experience with BS 3 but am new to BS 4 and flex; I am having trouble understanding it. I have set up the grid as per the documentation, but the second column is displaying below the first instead of beside it. I have tried adjusting display proper ...
Currently, I am attempting to use jQuery to append hover CSS styles to buttons. While I have been successful in applying the desired styles upon hovering over the button, the issue arises when the mouse moves away - the styles remain. Here's the code ...
I'm currently facing a challenge while working on the personal portfolio webpage project for freecodecamp. Everything looks good except for one issue. Although I have managed to center align my heading and paragraph text as intended, the paragraph te ...
Google's webmaster tools are indicating the presence of Duplicate title tags on pages that have pagination. Below are a few examples: HTML suggestions Duplicate title tags Your title provides users and search engines with valuable information about ...