What are some ways to design a side-by-side arrangement of an image and a label?

I've been attempting to achieve the design shown below, but have been unsuccessful so far:

https://i.sstatic.net/N9jGH.png

.exploreItem {
  background-color: #353258;
  /* rgba(31, 31, 31, 1) */
  border: 1px solid #4152F1;
  color: white;
  /* padding: 20px 24px; */
  cursor: pointer;
  width: 90%;
  height: 45px;
  /* font-size: 15px;
  font: Arial;
  font-family: sans-serif;
  display: block; */
}
.exploreImg {
  /* background-color: lightblue; */
  display: inline-block;
  vertical-align: top;
  height: 30px;
  /* width: 10px; */
  padding-left: 10px;
}
.exploreLabel {
  /* vertical-align: middle; */
  /* background-color: grey; */
  display: inline-block;
  font-size: 15px;
  font: Arial;
  font-family: sans-serif;
  /* width: 10px; */
  margin-top: 0px;
}
         <div class="exploreItem" id="exploreItem">
           <img class="exploreImg" src="images/defaultProfImg.png">
           <label class="exploreLabel">Explore</label>
         </div>

Is there a way for me to successfully create the desired layout? (With an image beside the explore label as seen in the image)

htmlcsslayout

Answer №1

You can achieve the desired effect without using an image by utilizing CSS. If you do decide to use an image, simply apply display: flex to the .exploreItem class and align-items: center for a magical result.

Below is a simpler CSS-only solution using a :before pseudo element:

.exploreItem {
  background-color: #353258;
  border: 1px solid #4152F1;
  color: white;
  cursor: pointer;
  padding: 16px;
  width: 90%;
  border-radius: 32px;
}
.exploreLabel {
  display: flex;
  align-items: center;
  font-size: 15px;
  font: Arial;
  font-family: sans-serif;
  margin-top: 0px;
}
.exploreLabel:before {
  content: '';
  height: 28px;
  width:28px;
  background-color: #4152F1;
  border: 1px solid #a89dff;
  display: block;
  margin-right: 16px;
  border-radius: 50%;
}
<div class="exploreItem" id="exploreItem">
   <label class="exploreLabel">Explore</label>
</div>

Answer №2

.wrapper {
        width: 200px;
    }
    .exploreItem {
        width: 100%;
        display: flex;
        background: transparent;
        padding: 20px 30px;
        border: 1px solid transparent;
        border-radius: 50px;
        align-items: center;
        cursor: pointer;
    }
    .exploreItem label {
        color: #919191;
    }
    .exploreItem.active {
        display: flex;
        background: #2F2D50;
        border: 1px solid #483EF1;
    }
    .exploreItem.active label {
        color: #ffffff;
    }
    .exploreItem i {
        display: block;
        background: #A3A3A3;
        border: 1px solid transparent;
        width: 25px;
        height: 25px;
        border-radius: 50px;
        margin-right: 10px;
    }
    .exploreItem.active i {
        background: #483EF1;
        border: 1px solid #A5A0FF;
    }
<div class="wrapper">
    <div class="exploreItem active">
        <i></i>
        <label class="exploreLabel">Discover</label>
    </div>
    <div class="exploreItem">
        <i></i>
        <label class="exploreLabel">Explore</label>
    </div>
</div>

Answer №3

Here is the code snippet you can use:

HTML:

<div class="wrapper">
  <div class="circle"></div>
  <label>
      <span>Discover</span>
  </label>
</div>

CSS:

.wrapper
{
    background: #353258;
    border: 1.5px solid #4152F1;
    color: white;
    padding: 7px 8px;
    cursor: pointer;
    width: 150px;
    height:33px;
    border-radius: 30px;
    cursor: pointer;
}
.circle
{
    background: #502ffb;
    height: 28px;
    width: 28px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 50%;
}

label
{
    color: white;
    display: inline-block;
    cursor: pointer;
}

label span
{
    position: absolute;
    margin-top: -24px;
    margin-left: 3px;
    font-size: 17px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble aligning 'nav' to the center of the page in the metro-bootstrap.css file

Struggling with alignment issues in my navigation list while using 'metro-bootstrap.css' from . Despite numerous attempts, I can't seem to get it right. Visit advinadv.co.uk for a closer look. Any assistance would be greatly appreciated! Be ...

htmlcsstwitter-bootstrap

Automatically insert personalized CSS design markers into Material-UI elements using code

Within my react-redux app, I am utilizing material-ui components. The initial UI prototype was established using adobe-xd, which has the capability to export character styles (design tokens) in a CSS file format: :root { /* Colors: */ --text-color: #F8E29 ...

cssreact-reduxmaterial-uiadobe-xd

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

javascripthtmlcss

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

Ways to determine if a list is empty with thymeleaf?

<div th:if="${tblUserList != null}"> --content-- </div> I'm having some trouble with the thymeleaf code provided above. The variable tblUserList is a list, and I need to check if it is empty instead of just checking if it is null. How ca ...

htmlthymeleaf

How can I adjust the indentation in Angular Prime-ng's p-tree component?

In my project, I am utilizing the primg-ng tree component for the sidebar. Currently, the output is displayed as shown here: https://i.stack.imgur.com/kcSQt.png However, I am looking to maintain consistent indentation levels without any adaptive changes ...

cssangularfrontendprimengprimeng-tree

Generating an HTML report that includes a header and footer on every page using Firefox

I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox. A Possible Solution: <html> <head> <title></title&g ...

htmlcssprintingmedia-queries

Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment. Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. ...

csssafaricross-browser

Can a piece of code be created that generates the XPath for a specific element?

I'm interested in finding out if there is a way to automatically generate an XPath by simply selecting an element, eliminating the need for manual updates when changes occur in HTML files on websites. I welcome any suggestions or alternatives that can ...

javahtmlcssseleniumselenium-webdriver

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

javascriptcssreactjstwitter-bootstrapflexbox

Hide elements in hidden divs until the page is fully loaded to reduce initial page

www.prismasites.com I am creating a unique world map by using SVG DIVs shaped like Continents. Upon clicking on a continent on the world map, it conceals the world map DIV and displays the respective continent DIV with SVG. I have successfully achieved ...

jqueryhtmlcssloadhidden

How to completely disable a DIV using Javascript/JQuery

Displayed below is a DIV containing various controls: <div id="buttonrow" class="buttonrow"> <div class="Add" title="Add"> <div class="AddButton"> <input id="images" name="images" title="Add Photos" ...

javascriptjqueryhtml

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

javascriptjqueryhtmlcss

The value of the checkbox with the `on` attribute is not being passed to the Action class. Should I retrieve the parameter directly from

When submitting a form to my action class using the classic getter/setter method with Struts 2, all fields receive their values except for a boolean field which remains false even after checking the corresponding checkbox. Here is an example of the checkb ...

htmlcheckboxstruts2struts2-interceptorsstruts-tags

Experiencing difficulty inputting data into database using PDO

Attempting to save user input data to a database using PDO, I have created a form for users to input their information. However, when I submit the form, it redirects to proses_input.php and displays a blank page. I tried combining the code into one file, b ...

phphtmlpdo

What is the best way to ensure that my grid remains contained within its designated area?

I need to incorporate a grid of 16x16 or 64x64 into my layout without it overflowing. I'm considering using flexbox, but unsure of the implementation process. My goal is to have the grid resize based on the container size rather than exceeding its bou ...

javascripthtmlcss

What causes Firefox (Mobile) to zoom out of my webpage?

After launching my webpage on Google Chrome mobile (android), everything loads perfectly. However, when trying to access the site using Firefox mobile (android), most pages load in a zoomed-out view. The issue is resolved by opening the drop-down menu, but ...

htmlcssfirefox

Ways to determine if a textbox is empty and trigger a popup notification with jQuery

I'm having trouble with checking if the textbox is empty in my form. Every time I try to submit, instead of receiving an alert message saying "Firstname is empty," I get a message that says "Please fill out filled." ('#submit').click(func ...

javascriptjqueryhtmlformstextbox

When utilizing jQuery to add a <li> element, it suddenly vanishes

? http://jsfiddle.net/AGinther/Ysq4a/ I'm encountering an issue where, upon submitting input, a list item should be created with the content from the text field. Strangely, it briefly appears on my website but not on the fiddle, and no text is appen ...

javascriptjqueryajaxhtml

In HTML, specify that the height of both the `html` and

I am facing an issue with the container-about div. I have set its height to 100% so that the div occupies the entire width and height after the header div. The problem is that currently, I cannot scroll to view the full text. It would be great if there wa ...

htmlcss